Skip to content

Latest commit

 

History

History
90 lines (73 loc) · 2.13 KB

README.md

File metadata and controls

90 lines (73 loc) · 2.13 KB

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