iconfont是過去使用較多的圖標(biāo)方案，后來更傾向于使用SVG，因?yàn)镾VG更靈活兼容性更好。在最近的幾個(gè)Vue2項(xiàng)目中，因?yàn)閺?qiáng)調(diào)功能弱化設(shè)計(jì)所以直接用Element UI自帶的圖標(biāo)即可滿足需求。
Element Plus的圖標(biāo)庫相對(duì)Element UI更加豐富，然而對(duì)于喜歡折騰的人還是遠(yuǎn)遠(yuǎn)不夠的，在我折騰的這個(gè)個(gè)人倉庫，決定嘗試更多圖標(biāo)解決方案。
除了使用Element Plus自帶的圖標(biāo)，iconify是本次嘗試的主要目的。
Element Plus Icon
全量導(dǎo)入
全量導(dǎo)入從來都是最簡單的方法，但并不總是最推薦的做法
- 安裝
@element-plus/icons-vue
npm install @element-plus/icons-vue
- 注冊所有圖標(biāo)
// main.ts
// 如果您正在使用CDN引入，請刪除下面一行。
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
- 直接使用
<el-icon :size="size" :color="color">
<Edit />
</el-icon>
自動(dòng)導(dǎo)入
自動(dòng)導(dǎo)入看起來逼格更高一些，當(dāng)然也麻煩一點(diǎn)。
- 安裝unplugin-icons,unplugin-auto-import,@element-plus/icons-vue
npm i -D unplugin-icons
npm i -D unplugin-auto-import
npm i @element-plus/icons-vue
- 修改配置文件（僅列出主要部分）
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import IconsResolver from 'unplugin-icons/resolver' //是它
import Icons from 'unplugin-icons/vite' //是它
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import path from 'path'
...
export default ({ mode }) => {
return defineConfig({
...
plugins: [
vue(),
VueSetupExtend(),
AutoImport({
resolvers: [
ElementPlusResolver(),
// Auto import icon components
// 自動(dòng)導(dǎo)入圖標(biāo)組件
IconsResolver({
prefix: 'Icon'
})
]
}),
Components({
resolvers: [
// Auto register icon components
// 自動(dòng)注冊圖標(biāo)組件
IconsResolver({
enabledCollections: ['ep']
}),
]
}),
Icons({
autoInstall: true
}),
...
- 直接使用
<i-ep-add-location class="text-orange-500" />
Iconify
https://iconify.design/
自動(dòng)導(dǎo)入Element Plus圖標(biāo)也很方便，但實(shí)際使用碰到了問題。制作一個(gè)圖標(biāo)選擇器，需要?jiǎng)討B(tài)使用icon，還有就是側(cè)邊欄也需要?jiǎng)討B(tài)加載圖標(biāo)。使用全局注冊時(shí)可以用component來動(dòng)態(tài)加載圖標(biāo)組件，但是在自動(dòng)導(dǎo)入時(shí)，它好像不起作用了。
另一個(gè)問題就是雖然Element Plus提供了將近300個(gè)圖標(biāo)，但是在實(shí)際開發(fā)中，總有一些顧及不到的地方，我們需要的圖標(biāo)還需要額外引入。
這時(shí)可以考慮iconify了，iconify有眾多圖標(biāo)集，圖標(biāo)個(gè)數(shù)更是數(shù)以萬計(jì)，并且開源免費(fèi)，而且可以使用自定義icon
- 安裝iconify-icon?依賴
npm i iconify-icon
- 在文件中使用
import 'iconify-icon';
<iconify-icon icon="ant-design:file-markdown-twotone"></iconify-icon>
So easy！
但這種使用方式需要連接服務(wù)器獲取圖標(biāo)數(shù)據(jù)，在網(wǎng)速不佳的時(shí)候，圖標(biāo)就很可能掛了，私有化部署更是不可能顯示出來圖標(biāo)。
所以更保險(xiǎn)的做法是使用離線圖標(biāo)，iconify提供了addIcon和addCollection兩個(gè)API，用于加載圖標(biāo)數(shù)據(jù)，iconify的核心是SVG的JSON，所以離線使用的時(shí)候，我們只需要獲得各個(gè)圖標(biāo)庫的json數(shù)據(jù)。
下面僅舉例說明使用現(xiàn)成的iconify-json
通過iconify使用Element Plus、Ant Design的圖標(biāo)集
- 接著上面的步驟，另外還打算使用ant的圖標(biāo)，所以也裝一下ant-design的json
npm i -D @iconify-json/ant-design
- 考慮到使用圖標(biāo)的地方比較多，所以新增一個(gè)自定義組件 MoIcon
<template>
<iconify-icon :icon="iconName"></iconify-icon>
</template>
<script setup lang="ts">
const props = defineProps<{ iconName: string }>()
import { addIcon, addCollection, disableCache, listIcons } from 'iconify-icon'
import antDesign from '@iconify-json/ant-design/icons.json'
import ep from '@iconify-json/ep/icons.json'
addCollection(ep)
addCollection(antDesign)
</script>
- 直接使用
<MoIcon icon-name="ep-fold" />
通過iconify還可以加載自己從iconfont上下載的圖標(biāo)或是UI同學(xué)直接給我們的SVG圖標(biāo)，本次就不展開說了，以后有機(jī)會(huì)的話寫一篇更詳細(xì)的文章。
控制臺(tái)警告
ntime-core.esm-bundler.js:40 [Vue warn]: Failed to resolve component: iconify-icon
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
按照官方的解釋，在Vite中使用不應(yīng)該出現(xiàn)這個(gè)警告
When using web component with Nuxt 3, you need to tell Nuxt that?
iconify-icon?is a custom element. Otherwise it will show few errors.
This configuration change is not needed when using Vue with?
@vitejs/plugin-vue.
但是我碰到了這個(gè)問題，暫時(shí)也沒找到原因，只好先配置一下，等解決了再記錄下來。文章來源：http://www.zghlxwxcb.cn/news/detail-758774.html
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag === 'iconify-icon'
}
}
}),
項(xiàng)目Git倉庫
本項(xiàng)目GIT地址：https://github.com/lucidity99/mocha-vue3-system文章來源地址http://www.zghlxwxcb.cn/news/detail-758774.html
到了這里，關(guān)于從零開始Vue3+Element Plus的后臺(tái)管理系統(tǒng)(五)——嘗試多種圖標(biāo)ICON方案iconify的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
