9月份字節(jié)跳動推出了iconPark圖標(biāo)，可以直接支持Vue，React。于是我就嘗試了下，發(fā)現(xiàn)確實好用。我使用的格式是svg格式也支持直接使用圖片。
官網(wǎng)：https://iconpark.bytedance.com/
image.png
在vue 還有 react中使用的話只需要去官網(wǎng)復(fù)制代碼直接項目使用就ok，代碼往往很簡潔比如：
<mail theme="outline" size="24" fill="#333"/>
這就是一個郵件的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'是自己給的自定義組件前綴也可以默認為空。)
import { install } from '@icon-park/vue/es/all';
install(Vue, 'svg');
Vue.use(VueRouter)
現(xiàn)在可以直接在各個組件頁面使用，不需要在像第二步單獨引用要使用的每個組件
<svg-home theme="filled"/>
(如果沒有給自定義前綴就是默認的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版本，我用的時候icon是沒有渲染上，拋出了一個警告說組件未加載，還不知道為什么如果知道可以告訴我。
總結(jié)一下就是，使用起來確實很方便，只需要安裝一個包就可以直接使用svg的圖標(biāo)，不需要自己去下載svg圖片，也不需要去做svg的公共組件來做，但是缺點也很明顯，就是現(xiàn)在只能使用官網(wǎng)給的圖標(biāo)，無法使用自己項目要用的圖標(biāo)，靈活性不夠，但愿字節(jié)能優(yōu)化一下加個自己的項目圖標(biāo)管理像阿里一樣，這樣就是真的香了。
