IconPark 圖標(biāo)官網(wǎng)：https://iconpark.bytedance.com/
IconPark Vue官方使用說(shuō)明： http://www.reibang.com/p/c5d7215bd991
安裝
npm install @icon-park/vue --save
按需引入
在組件的上方引用@icon-park/vue，并在組件的模板函數(shù)中使用:
<template>
<alarm theme="outline" />
</template>
<script>
/**
* 引入時(shí)使用駝峰式命名
* import {Alarm} from '@icon-park/vue';
* components: { Alarm }
*
* 使用時(shí)使用小寫(xiě)
*<alarm theme="outline" size="24" fill="#f60" />
*/
import {Alarm} from '@icon-park/vue';
export default {
components: {
Alarm
}
}
</script>
官方圖標(biāo)庫(kù)
一些簡(jiǎn)單的引用示例：
<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>
示例圖標(biāo)
全局引入
在main.js中引入
import Vue from 'vue'
import App from './App.vue'
// 引入所有官方圖標(biāo)
import { install } from '@icon-park/vue/es/all'
// 對(duì)引入圖標(biāo)進(jìn)行安裝
install(Vue) // 默認(rèn)前綴是 'icon', 例如: 對(duì)于`People`這個(gè)icon, 組件名字是`icon-people`.
install(Vue, 'i') // 使用自定義前綴'i', 例如: 對(duì)于`People`這個(gè)icon哮翘，組件名字是`i-people`.
// 引入圖標(biāo)庫(kù)樣式
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'
// 把全局需要注冊(cè)的圖標(biāo)放在這個(gè)位置
import { Home } from '@icon-park/vue'
// 使用Vue提供的`provide`屬性來(lái)設(shè)置全局配置渐溶。
const IconConfig = { ...DEFAULT_ICON_CONFIGS, prefix: 'icon' }
export default {
name: 'App',
components: {
[Home.name]: Home, // 使用此方法引入可以出現(xiàn)注冊(cè)未使用的報(bào)錯(cuò)情況
demo: () => import('./components/demo.vue')
},
provide() {
return {
ICON_CONFIGS: IconConfig
}
}
}
</script>
將IconPark嵌入到你的項(xiàng)目中
如果你的項(xiàng)目中需要使用到圖標(biāo)名稱(chēng)怜械，作者，分類(lèi)傅事，標(biāo)簽以及創(chuàng)建時(shí)間等額外的信息缕允，你可以使用位于每個(gè)NPM根目錄的icons.json文件。
圖標(biāo)屬性
| 屬性名稱(chēng) | 介紹 | 類(lèi)型 | 默認(rèn)值 |
|---|---|---|---|
| theme | 圖標(biāo)主題 | 'outline' | 'filled' | 'two-tone' | 'multi-color' | 'outline' |
| size | 圖標(biāo)的大小蹭越，寬高相同 | number | string | '1em' |
| spin | 給圖標(biāo)加旋轉(zhuǎn)效果 | boolean | false |
| fill | 圖標(biāo)的顏色障本，不超過(guò)4個(gè)顏色，默認(rèn)為當(dāng)前顏色 | 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 |
