9月份字節(jié)跳動(dòng)推出了iconPark圖標(biāo)蜜自，可以直接支持Vue坡脐，React奥务。于是我就嘗試了下物独，發(fā)現(xiàn)確實(shí)好用。我使用的格式是svg格式也支持直接使用圖片氯葬。
官網(wǎng)：https://iconpark.bytedance.com/
在vue 還有 react中使用的話只需要去官網(wǎng)復(fù)制代碼直接項(xiàng)目使用就ok挡篓，代碼往往很簡(jiǎn)潔比如：
<mail theme="outline" size="24" fill="#333"/>
這就是一個(gè)郵件的svg icon,
使用步驟：（官網(wǎng)有教程我這里只記錄vue的）
1、安裝包：
Vue3.0: npm i @icon-park/vue-next --save
Vue2.x: npm i @icon-park/vue --save
2帚称、直接引用使用
<template>
<home theme="filled"/>
</template>
<script>
import {Home} from '@icon-park/vue';
export default {
components: {
Home
}
}
</script>
3.0的使用差不多
3官研、如果想全局調(diào)用需要在main.js調(diào)用:
Vue2.x: (這里的'svg'是自己給的自定義組件前綴也可以默認(rèn)為空。)
import { install } from '@icon-park/vue/es/all';
install(Vue, 'svg');
Vue.use(VueRouter)
現(xiàn)在可以直接在各個(gè)組件頁(yè)面使用闯睹，不需要在像第二步單獨(dú)引用要使用的每個(gè)組件
<svg-home theme="filled"/>
(如果沒有給自定義前綴就是默認(rèn)的home)
Vue3.0:
import {install} from '@icon-park/vue-next/es/all';
import {createApp} from 'vue';
const app = createApp({});
// Install
install(app); // use default prefix 'icon', eg: icon is People, name is icon-people.
install(app, 'i'); // use custom prefix 'i', eg: icon is People, name is i-people.
app.mount('#app');
注：vue3.0 的vite版本戏羽，我用的時(shí)候icon是沒有渲染上，拋出了一個(gè)警告說組件未加載楼吃，還不知道為什么如果知道可以告訴我始花。
總結(jié)一下就是，使用起來確實(shí)很方便孩锡，只需要安裝一個(gè)包就可以直接使用svg的圖標(biāo)衙荐，不需要自己去下載svg圖片，也不需要去做svg的公共組件來做浮创，但是缺點(diǎn)也很明顯，就是現(xiàn)在只能使用官網(wǎng)給的圖標(biāo)砌函，無法使用自己項(xiàng)目要用的圖標(biāo)斩披，靈活性不夠，但愿字節(jié)能優(yōu)化一下加個(gè)自己的項(xiàng)目圖標(biāo)管理像阿里一樣讹俊，這樣就是真的香了垦沉。
