IconPark

IconPark Icons

Pure SVG Icons for IconPark

Introduction

Features

• Provide more than 1200 icons
• Provide 4 themes:
  • outline
  • filled
  • two-tone
  • multi-color

More

Please visit IconPark Website

• Copy SVG
• Copy React Icon component
• Copy Vue Icon component
• Download PNG
• Download SVG

Getting Started

Install

npm install @icon-park/svg --save

Include Component

Import an icon from @icon-park/svg and then call it:

import {Home} from '@icon-park/svg';

// examples

const svg = Home({theme: 'outline'});

console.log(svg);

Global Config

You can use the static methods setConfig in @icon-park/svg to set the default config globally:

import {setConfig} from '@icon-park/svg'

setConfig({
    theme: 'outline',
    size: '1em',
    strokeWidth: 4,
    strokeLinecap: 'round',
    strokeLinejoin: 'round',
    outStrokeColor: '#000',
    outFillColor: '#2F88FF',
    innerStrokeColor: '#FFF',
    innerFillColor: '#43CCF8'
})

Import on Demand

You can use babel-plugin-import to import icons on demand.

Set config like this:

{
    "plugins": [
        [
            "import",
            {
                "libraryName": "@icon-park/svg",
                 "libraryDirectory": "es/icons",
                 "camel2DashComponentName": false 
            }
        ]
    ]
}

Props

| prop | description | type | default | note | | ———- | — | — | — | — | | theme | Theme of the icons. | ‘outline’ | ‘filled’ | ‘two-tone’ | ‘multi-color’ | ‘outline’ | | size | The width/height of the icon | number | string | ‘1em’ | | spin | Rotate icon with animation | boolean | false | | fill | Colors of theme | string | string[] | ‘currentColor’ | | strokeLinecap | the stroke-linecap prop of svg element | ‘butt’ | ‘round’ | ‘square’ | ‘round’ | | strokeLinejoin | the stroke-linejoin prop of svg element | ‘miter’ | ‘round’ | ‘bevel’ | ‘round’ | | strokeWidth | the stroke-width prop of svg element | number | 4 |

This site is open source. Improve this page.