IconPark/packages/vue

IconPark Icons

Vue 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/vue --save

Include Component

Import an icon from @icon-park/vueat the top of a component and then use it in the template tag:

<template>
<home theme="filled"/>
</template>
<script>
import {Home} from '@icon-park/vue';

export default {
    components: {
        Home
    }
}
</script>

If you don't want to refer to it, you can install icons globally.

import * as icons from '@icon-park/vue';
import Vue from 'vue';

// Install
Object.values(icons).forEach(icon => {
    Vue.install(icon.name, icon);
});

Style Sheet

Import the icon style:

import '@icon-park/vue/styles/index.css';

Global Config

You can use the 'provide' property provided by Vue to set the global configuration.

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

Import on Demand

You can use babel-plugin-import to import icons on demand.

Set config like this:

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

Icon Component

We recommend loading icons on demand, because this can greatly reduce the volume of compiled code。 However, in some scenarios similar to remote loading menus, direct reference to all icons can reduce the development cost.

Usage:

<template>
<icon-park type="home" theme="filled"/>
</template>
<script>
import {IconPark} from '@icon-park/vue/all';

export default {
    components: {
        IconPark
    }
}
</script>

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