IconPark Documentation

Install the IconPark Vue Next package using npm to use the icon system in your Vue project.

npm install @icon-park/vue-next --save

Install the IconPark React package using npm to use the icon system in your React projects.

npm install @icon-park/react --save

You can set global configuration for all icons by using Vue's provide API with the ICON_CONFIGS key. This allows you to override default settings like the prefix globally.

<template>
<div>
<home/>
</div>
</template>
<script lang="ts">
import {DEFAULT_ICON_CONFIGS} from '@icon-park/vue'
import {Home} from '@icon-park/vue';

const IconConfig = {...DEFAULT_ICON_CONFIGS, prefix: 'icon'}

export default {
    name: 'App',
    provide () {
        return {
            ICON_CONFIGS: IconConfig
        }
    },
    components: {
        Home
    }
};
</script>

IconPark uses a technology that transforms a single SVG source into multiple themes by adjusting fill and stroke attributes. You can switch between the following themes:

• outline
• filled
• two-tone
• multi-color

Coloring Rules:

• Basic coloring: Set the fill attribute. fill sets the color inside the object, while stroke sets the color of the lines.
• Two-tone/Multi-color: Pass an array of colors to the fill prop to apply different colors to different parts of the icon.

To reduce bundle size, use babel-plugin-import to load icons on demand. Configure your Babel settings as follows:

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

Depending on your project type, you can install the corresponding NPM package:

• React: @icon-park/react
• Vue 2: @icon-park/vue
• Vue 3: @icon-park/vue-next
• Pure SVG: @icon-park/svg

To ensure icons are styled correctly, import the required CSS or Less files at the entry point of your application.

import '@icon-park/react/styles/index.css';
// or
import '@icon-park/react/styles/index.less';

To avoid manual imports for every icon, you can install IconPark globally in your Vue app. This allows you to use icons via a prefix (e.g., icon-people for the People icon).

By default, the prefix is icon. You can specify a custom prefix as the second argument to install().

import {install} from '@icon-park/vue-next/es/all';
import {createApp} from 'vue';

const app = createApp({});

// Install with default prefix 'icon' (e.g., <icon-people />)
install(app);

// Install with custom prefix 'i' (e.g., <i-people />)
install(app, 'i');

app.mount('#app');

To use icons globally without manual imports in every component, use the install method from @icon-park/vue-next/es/all.

By default, the component prefix is icon (e.g., People becomes icon-people). You can provide a custom prefix as the second argument to install (e.g., i makes it i-people).

import {install} from '@icon-park/vue-next/es/all';
import {createApp} from 'vue';

const app = createApp({});

// Install with default prefix 'icon'
install(app); 

// Install with custom prefix 'i'
install(app, 'i'); 

app.mount('#app');

To reduce bundle size, use babel-plugin-import to load icons on demand. Configure the plugin in your Babel configuration as follows:

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