从零开始Vue3+Element Plus的后台管理系统(五)——尝试多种图标ICON方案iconify

iconfont是过去使用较多的图标方案,后来更倾向于使用SVG,因为SVG更灵活兼容性更好。在最近的几个Vue2项目中,因为强调功能弱化设计所以直接用Element UI自带的图标即可满足需求。

Element Plus的图标库相对Element UI更加丰富,然而对于喜欢折腾的人还是远远不够的,在我折腾的这个个人仓库,决定尝试更多图标解决方案。
除了使用Element Plus自带的图标,iconify是本次尝试的主要目的。

Element Plus Icon

全量导入

全量导入从来都是最简单的方法,但并不总是最推荐的做法

  1. 安装
    @element-plus/icons-vue
npm install @element-plus/icons-vue
  1. 注册所有图标
// 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)
}
  1. 直接使用
<el-icon :size="size" :color="color">
    <Edit />
</el-icon>

自动导入

自动导入看起来逼格更高一些,当然也麻烦一点。

  1. 安装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
  1. 修改配置文件(仅列出主要部分)
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
          // 自动导入图标组件
          IconsResolver({
            prefix: 'Icon'
          })
        ]
      }),
      Components({
        resolvers: [
          // Auto register icon components
          // 自动注册图标组件
          IconsResolver({
            enabledCollections: ['ep']
          }),
        ]
      }),

      Icons({
        autoInstall: true
      }),
      ...
  1. 直接使用
<i-ep-add-location class="text-orange-500" />

Iconify

https://iconify.design/

自动导入Element Plus图标也很方便,但实际使用碰到了问题。制作一个图标选择器,需要动态使用icon,还有就是侧边栏也需要动态加载图标。使用全局注册时可以用component来动态加载图标组件,但是在自动导入时,它好像不起作用了。

另一个问题就是虽然Element Plus提供了将近300个图标,但是在实际开发中,总有一些顾及不到的地方,我们需要的图标还需要额外引入。

这时可以考虑iconify了,iconify有众多图标集,图标个数更是数以万计,并且开源免费,而且可以使用自定义icon

  1. 安装iconify-icon 依赖
npm i iconify-icon
  1. 在文件中使用
import 'iconify-icon';

<iconify-icon icon="ant-design:file-markdown-twotone"></iconify-icon>

So easy!

但这种使用方式需要连接服务器获取图标数据,在网速不佳的时候,图标就很可能挂了,私有化部署更是不可能显示出来图标。

所以更保险的做法是使用离线图标,iconify提供了addIcon和addCollection两个API,用于加载图标数据,iconify的核心是SVG的JSON,所以离线使用的时候,我们只需要获得各个图标库的json数据。

下面仅举例说明使用现成的iconify-json

通过iconify使用Element Plus、Ant Design的图标集

  1. 接着上面的步骤,另外还打算使用ant的图标,所以也装一下ant-design的json
npm i -D @iconify-json/ant-design
  1. 考虑到使用图标的地方比较多,所以新增一个自定义组件 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>

  1. 直接使用
<MoIcon icon-name="ep-fold" />

image.png

通过iconify还可以加载自己从iconfont上下载的图标或是UI同学直接给我们的SVG图标,本次就不展开说了,以后有机会的话写一篇更详细的文章。

控制台警告

image.png

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中使用不应该出现这个警告

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.

但是我碰到了这个问题,暂时也没找到原因,只好先配置一下,等解决了再记录下来。

plugins: [
      vue({
        template: {
          compilerOptions: {
            isCustomElement: (tag) => tag === 'iconify-icon'
          }
        }
      }),

项目Git仓库

本项目GIT地址:https://github.com/lucidity99/mocha-vue3-system

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>