如何将阿里巴巴矢量图标库iconfont引入到vue项目中？

前言

当我们使用一款前端UI的时候，图标的使用必不可少，但是单单一个UI的图标有时候无法满足我们的需求，那么我们可以到阿里巴巴矢量图标库iconfont里面去寻找，作为一个程序员，怎么把它做成通过代码的方式使用呢？

一、Element-plus图标库的使用

首先我们来看一下Element-plus图标库使用，由于我的项目基于Element-plus，并且需要扩展额外的图标，所以就已Element-plus的使用为例子展开叙述，Element-plus安装之后，即可食用啊。

1.1 安装

npm install @element-plus/icons-vue

1.2 注册

注册可以选择按需注册，也可以全局注册，这里为了方便，我就全局注册。

// 图标引入
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.3 使用

<el-icon><Plus /></el-icon>
<el-icon><SwitchButton /></el-icon>
<el-icon><Avatar /></el-icon>

使用方式很简单，种类也很多，针对一般的小项目来说，完全够用了，但是就一个 【购物车】 的图标都没有，这点我也是没想到，属实高啊，那不能我自己画一个出来吧，那么我们就得引入第三方库的支持了。

二、iconfont图标库的使用

iconfont的官网：www.iconfont.cn/ 可以看到很多各种样式的图标供我们选择。

看了element-plus的图标使用方式，我们如何将iconfont图标也变成和它一样的使用呢？

2.1 设计思路

根据阿里巴巴矢量图标库iconfont获取方式，我们设计以下几种可行方案：

1）下载为png或者svg图片，将图片导入到我们的项目，引入其路径

2）复制svg代码，将其嵌入到我们的项目，转换为图标元素，通过代码的形式使用

2.2 实现步骤

我们最终选择了第二种方案来实现我们的图标引用，首先复制svg代码至项目中。

2.2.1 新建Shop.vue，拷贝svg代码

<template>
  <svg t="1735110751450" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1921" width="200" height="200"><path d="M384 832v85.333333h-85.333333v-85.333333h85.333333z m405.333333 0v85.333333h-85.333333v-85.333333h85.333333zM240.32 185.002667l24.149333 140.928h633.173334L835.285333 746.666667h-563.626666l-85.333334-497.685334H94.485333v-64h145.834667z m583.104 204.928H275.434667L325.632 682.666667h454.464l43.328-292.736z" fill="#1677FF" p-id="1922"></path></svg>
</template>

2.2.2 新建index.js，导出Shop.vue

export { default as Shop } from './Shop.vue'

2.2.3 注册

也是同样的在main.js中进行注册。

// 第三方图标引入
import * as iconfont from './assets/icons'
// 注册第三方图标
for(let icon in iconfont) {
    app.component(`myIcon${icon}`, iconfont[icon])
}

2.2.4 代码使用方式

使用方式和Element-plus一样，采用代码的方式。

<!--可以直接使用-->
<myIconShop />
<!--搭配el-icon使用-->
<el-icon><my-icon-shop /></el-icon>

2.2.5 代码优化

1）去掉 index.js 文件： 直接在 main.js 或者一个专门的图标注册文件中自动导入所有的图标文件。

2）动态加载图标组件： 使用 require.context 来批量引入所有 Shop.vue 组件。然后再通过 app.component 注册组件。

// 获取图标文件夹下的所有 `.vue` 文件
const iconFiles = require.context('./assets/icons', false, /\.vue$/);
// 动态导入所有图标组件
iconFiles.keys().forEach((fileName) => {
    const componentName = fileName.replace(/^\.\/(.*)\.vue$/, 'myIcon$1');
    app.component(componentName, iconFiles(fileName).default);
});

总结

想了解更多的微服务架构实践吗？ 关注公众号 【Java星探】，加入MicroAdmin开源社区，与我们共同打造高效、灵活的微服务应用。这里有丰富的技术干货，公司架构实战、最新的项目动态，更有机会与开发者们一起交流、成长。