需求來源
Ant-Design-Vue升級到2.x以上的版本之后，自帶的圖標(biāo)庫就不支持通過給組件傳遞一個代表指定圖標(biāo)的屬性來使用了。
1. 之前
<-- 顯示Home圖標(biāo) --> <a-icon type="home" />
2. 現(xiàn)在
<template>
<message-outlined :style="{fontSize: '16px', color: '#08c'}" />
</template>
<script setup>
import { MessageOutlined } from '@ant-design/icons-vue';
</script>zh在這種形式下，每個要用到的圖標(biāo)都需要手動引用一次，并且由于每個組件沒有統(tǒng)一標(biāo)準(zhǔn)的名稱，所以無法使用打包工具提供的一些自動引入組件的插件（比如vite的unplugin-vue-components）
這樣做也會帶來一定的好處：打包的時候只會打包用到的圖標(biāo)的代碼，不會引入其它沒用到的圖標(biāo)。
但是任何需求都不是絕對，總有不一樣的需求，比如我；
實(shí)際測試，完整的圖標(biāo)庫打包，經(jīng)過Gzip壓縮后只有130 kb+；完全可以接受
Tree Shaking
Tree Shaking 指的就是當(dāng)引入一個模塊的時候，不引入這個模塊的所有代碼，只引入需要的代碼
Tree-shaking的本質(zhì)是消除無用的js代碼。無用代碼消除在廣泛存在于傳統(tǒng)的編程語言編譯器中，編譯器可以判斷出某些代碼根本不影響輸出，然后消除這些代碼，這個稱之為DCE（dead code elimination）
自動引入
1.介紹
本文所指的自動引入指的是，在項目的任意組件內(nèi)，直接使用這個圖標(biāo)，不需要通過手動引入。同時實(shí)現(xiàn)按需引入+自動引入，以我的能力目前沒找到....（打包工具的插件應(yīng)該可以實(shí)現(xiàn)）；
當(dāng)然可以直接在開始運(yùn)行的時候?qū)胝麄€圖標(biāo)模板，然后循環(huán)注冊到Vue的組件，但是這樣的缺點(diǎn)就是使用圖標(biāo)只能在模板內(nèi)寫死，例如：
<message-outlined :style="{fontSize: '16px', color: '#08c'}" />但是很多時候，我們想要的是傳遞一個屬性，來動態(tài)顯示不同圖標(biāo)，常見的需求場景：定義路由的時候給每個路由定義一個代表圖標(biāo)的元屬性，通過路由生成菜單的時候，直接展示元屬性里指定的圖標(biāo)；
模板語法往往適合條件明確的情況，條件不明確了，那就該JSX入場了。
2.實(shí)現(xiàn)
首先引入@ant-design/icons-vue整個圖標(biāo)庫，然后Jsx組件內(nèi)，通過渲染函數(shù)直接渲染指定的圖標(biāo)；基礎(chǔ)代碼如下：
<script>
import {h} from 'vue'
import * as $icon from '@ant-design/icons-vue';
/*
* 自動引入antd icon圖標(biāo)
* */
export default {
props:['icon'],
setup(props){
return ()=>h(
$icon[props.icon],
{
style:{fontSize:"18px"}
});
}
}
</script>3.拓展
@ant-design/icons-vue圖標(biāo)很全，但也有不夠用的時候，這時候就可以考慮，讓這個JSX組件兼容 iconfont圖標(biāo)了；
眾所周知，阿里巴巴圖標(biāo)庫一般都是統(tǒng)一class前綴，@ant-design/icons-vue的名字則是五花八門，這不，判斷的標(biāo)準(zhǔn)不就來了嗎！
如果傳遞的icon屬性是icon開頭，就渲染一個class位圖標(biāo)的i標(biāo)簽，其它的照常作為antd標(biāo)簽渲染；代碼如下：
<script>
import {h} from 'vue'
import * as $icon from '@ant-design/icons-vue';
import config from '@/config'
/*
* 自動引入antd icon圖標(biāo)
* */
export default {
props:['icon'],
setup(props){
/*
* 判斷是icon還是antd的圖標(biāo)
* */
if(props.icon.indexOf('icon-') != -1){
return ()=>h(
'i',
{
class:"iconfont "+props.icon,
style:{fontSize:"18px"}
});
}else{
return ()=>h(
$icon[props.icon],
{
style:{fontSize:"18px"}
});
}
}
}
</script>到此結(jié)束，如果還需要繼續(xù)拓展，那，干就完了！
