# 圖標選擇器 ## # 圖標集預生成 由于圖標選擇器這個比較特殊的存在，項目會打包一些比較多的圖標，圖標選擇器的圖標需要事先指定并生成相應的文件。 ### # 生成 * 執行圖標生成命令 ~~~ yarn gen:icon ~~~ * 這里會讓你選擇本地還是在線生成，兩種方式各有利弊。如下圖所示 local 表示本地，online 表示在線，回車確認  * 選擇你要生成的圖標集,回車確認  * 選擇圖標輸出的目錄(項目默認 src/components/Icon/data)，可以直接回車選擇默認  到這里圖標集已經生成完成了，此時你的圖標選擇器已經是你所選的的圖標集的圖標了。 注意不要頻繁更新 如果前面選擇的是本地生成的話，頻繁更換圖標集，可能會導致圖標丟失或者顯示不出來 ### # 優缺點 * **在線圖標(項目默認,推薦)** 該方式會在圖標選擇器使用到圖標的時候進行在線請求,然后緩存對應的圖標到瀏覽器。可以有效減少代碼打包體積。 如果你的項目可以訪問外網，建議可以使用這種方式 **缺點：** 在局域網或者無法訪問到外網的環境中圖標顯示不出來 * **本地圖標** 該方式會在打包的時候將圖標選擇器的圖標全部打包到 js 內。在使用的時候不會額外的請求在線圖標 **缺點：** 打包體積會偏大，具體的體積增加得看前面選擇圖標集的時候選擇的圖標數量的多少決定 ***** ## # 組件庫圖標使用 使用`ant-design-vue`提供的圖標 ~~~ <template> <StarOutlined /> <StarFilled /> <StarTwoTone twoToneColor="#eb2f96" /> </template> <script> import { defineComponent } from 'vue'; import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons-vue'; export default defineComponent({ components: { StarOutlined, StarFilled, StarTwoTone }, }); </script> ~~~ ## # Svg Sprite 圖標 ### #使用 將需要的 svg 圖標放到`src/assets/icons`內 例: test.svg 1. 使用`SvgIcon`組件進行展示 ~~~ <template> <SvgIcon name="test" /> </template> <script> import { defineComponent } from 'vue'; import { SvgIcon } from '/@/components/Icon'; export default defineComponent({ components: { SvgIcon }, }); </script> ~~~ 2. 使用`Icon`組件進行展示 以`｜svg`結尾會自動使用`SvgIcon`組件 ~~~ <template> <Icon name="test|svg" /> </template> <script> import { defineComponent } from 'vue'; import { Icon } from '/@/components/Icon'; export default defineComponent({ components: { Icon }, }); </script> ~~~ ## #Iconify 圖標 使用方式請參考 [Icon 組件](icon.md) 項目中使用到的是[vite-plugin-purge-icons](https://github.com/antfu/purge-icons/blob/main/packages/vite-plugin-purge-icons/README.md)這個插件來進行圖標實現。 1. 安裝依賴 ~~~ yarn add @iconify/iconify yarn add @iconify/json @purge-icons/generated -D ~~~ 2. 在`vite.config.ts`內引入插件 ~~~ import PurgeIcons from 'vite-plugin-purge-icons'; export default { plugins: [PurgeIcons()], }; ~~~ 3. 編寫 Icon 組件 完整代碼 [src/components/Icon/src/Icon.vue](https://github.com/jeecgboot/jeecgboot-vue3/tree/master/src/components/Icon/src/Icon.vue) ~~~ <template> <SvgIcon :size="size" :name="getSvgIcon" v-if="isSvgIcon" :class="[$attrs.class]" :spin="spin" /> <span v-else ref="elRef" :class="[$attrs.class, 'app-iconify anticon', spin && 'app-iconify-spin']" :style="getWrapStyle" ></span> </template> <script lang="ts"> import type { PropType } from 'vue'; import { defineComponent, ref, watch, onMounted, nextTick, unref, computed, CSSProperties, } from 'vue'; import SvgIcon from './SvgIcon.vue'; import Iconify from '@purge-icons/generated'; import { isString } from '/@/utils/is'; import { propTypes } from '/@/utils/propTypes'; const SVG_END_WITH_FLAG = '|svg'; export default defineComponent({ name: 'GIcon', components: { SvgIcon }, props: { // icon name icon: propTypes.string, // icon color color: propTypes.string, // icon size size: { type: [String, Number] as PropType<string | number>, default: 16, }, spin: propTypes.bool.def(false), prefix: propTypes.string.def(''), }, setup(props) { const elRef = ref<ElRef>(null); const isSvgIcon = computed(() => props.icon?.endsWith(SVG_END_WITH_FLAG)); const getSvgIcon = computed(() => props.icon.replace(SVG_END_WITH_FLAG, '')); const getIconRef = computed(() => `${props.prefix ? props.prefix + ':' : ''}${props.icon}`); const update = async () => { if (unref(isSvgIcon)) return; const el = unref(elRef); if (!el) return; await nextTick(); const icon = unref(getIconRef); if (!icon) return; const svg = Iconify.renderSVG(icon, {}); if (svg) { el.textContent = ''; el.appendChild(svg); } else { const span = document.createElement('span'); span.className = 'iconify'; span.dataset.icon = icon; el.textContent = ''; el.appendChild(span); } }; const getWrapStyle = computed((): CSSProperties => { const { size, color } = props; let fs = size; if (isString(size)) { fs = parseInt(size, 10); } return { fontSize: `${fs}px`, color: color, display: 'inline-flex', }; }); watch(() => props.icon, update, { flush: 'post' }); onMounted(update); return { elRef, getWrapStyle, isSvgIcon, getSvgIcon }; }, }); </script> <style lang="less"> .app-iconify { display: inline-block; // vertical-align: middle; &-spin { svg { animation: loadingCircle 1s infinite linear; } } } span.iconify { display: block; min-width: 1em; min-height: 1em; background-color: @iconify-bg-color; border-radius: 100%; } </style> ~~~ 原文：https://doc.vvbin.cn/dep/icon.html