IconPark/packages/svg

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