IconPark Icons
Vue3 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-next --save
Include Component
Import an icon from @icon-park/vue-next
at 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-next';
export default {
components: {
Home
}
}
</script>
If you don't want to refer to it, you can install icons globally.
import {install} from '@icon-park/vue-next/es/all';
import {createApp} from 'vue';
const app = createApp({});
install(app);
install(app, 'i');
app.mount('#app');
Style Sheet
Import the icon style:
import '@icon-park/vue-next/styles/index.css';
Global Config
You can use IconProvider
in @icon-park/vue-next
to set the default config globally:
<template>
<div>
<home/>
</div>
</template>
<script lang="ts">
import {DEFAULT_ICON_CONFIGS, IconProvider} from '@icon-park/vue-next';
import {Home} from '@icon-park/vue-next';
export default {
name: 'App',
setup(){
IconProvider({...DEFAULT_ICON_CONFIGS, prefix: 'icon'});
},
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-next",
"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-next/es/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 | |