IconPark Icons

Pure SVG Icons for IconPark

Introduction

Features

• Provide more than 2000 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 
            }
        ]
    ]
}

Embed IconPark in your project

If you need to use additional information such as icon name, author, category, label and creation time, you can use the icons.json file located in the root directory of each NPM.

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 |