IconPark 图标官网:https://iconpark.bytedance.com/
IconPark Vue官方使用说明: https://www.jianshu.com/p/c5d7215bd991
安装
npm install @icon-park/vue --save
按需引入
在组件的上方引用@icon-park/vue
,并在组件的模板函数中使用:
<template>
<alarm theme="outline" />
</template>
<script>
/**
* 引入时使用驼峰式命名
* import {Alarm} from '@icon-park/vue';
* components: { Alarm }
*
* 使用时使用小写
*<alarm theme="outline" size="24" fill="#f60" />
*/
import {Alarm} from '@icon-park/vue';
export default {
components: {
Alarm
}
}
</script>
一些简单的引用示例:
<template>
<div class="demo">
<home theme="outline" />
<harm theme="filled" size="20" />
<alarm theme="two-tone" size="30" fill="#f60" />
<email-successfully theme="multi-color" size="36" fill="#f60" />
</div>
</template>
<script>
import { Home, Harm, Alarm, EmailSuccessfully } from '@icon-park/vue'
export default {
components: {
Home,
Harm,
Alarm,
EmailSuccessfully
}
}
</script>
全局引入
在main.js中引入
import Vue from 'vue'
import App from './App.vue'
// 引入所有官方图标
import { install } from '@icon-park/vue/es/all'
// 对引入图标进行安装
install(Vue) // 默认前缀是 'icon', 例如: 对于`People`这个icon, 组件名字是`icon-people`.
install(Vue, 'i') // 使用自定义前缀'i', 例如: 对于`People`这个icon,组件名字是`i-people`.
// 引入图标库样式
import '@icon-park/vue/styles/index.css'
new Vue({
render: h => h(App)
}).$mount('#app')
在app.vue中引入
<template>
<div id="app">
<demo></demo>
</div>
</template>
<script>
import { DEFAULT_ICON_CONFIGS } from '@icon-park/vue'
// 把全局需要注册的图标放在这个位置
import { Home } from '@icon-park/vue'
// 使用Vue提供的`provide`属性来设置全局配置。
const IconConfig = { ...DEFAULT_ICON_CONFIGS, prefix: 'icon' }
export default {
name: 'App',
components: {
[Home.name]: Home, // 使用此方法引入可以出现注册未使用的报错情况
demo: () => import('./components/demo.vue')
},
provide() {
return {
ICON_CONFIGS: IconConfig
}
}
}
</script>
将IconPark嵌入到你的项目中
如果你的项目中需要使用到图标名称,作者,分类,标签以及创建时间等额外的信息,你可以使用位于每个NPM根目录的icons.json
文件。
图标属性
属性名称 | 介绍 | 类型 | 默认值 |
---|---|---|---|
theme | 图标主题 | 'outline' | 'filled' | 'two-tone' | 'multi-color' | 'outline' |
size | 图标的大小,宽高相同 | number | string | '1em' |
spin | 给图标加旋转效果 | boolean | false |
fill | 图标的颜色,不超过4个颜色,默认为当前颜色 | string | string[] | 'currentColor' |
strokeLinecap | svg元素的stroke-linecap属性 | 'butt' | 'round' | 'square' | 'round' |
strokeLinejoin | svg元素的stroke-linejoin属性 | 'miter' | 'round' | 'bevel' | 'round' |
strokeWidth | svg元素的stroke-width属性 | number | 4 |