Package Exports

@icon-park/svg
@icon-park/svg/es
@icon-park/svg/es/index.js
@icon-park/svg/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@icon-park/svg) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

IconPark Icons

Pure SVG Icons for IconPark

Introduction

Features

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

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
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

@icon-park/svg