BuildAdmin04：vue加载本地svg图标

前言

上篇文章主要讲了图标组件Icon的实现，主要包括了两种常用的图标。今天就讲一下如何在Icon中加载本地的svg图标。

开篇还是将Icon实现结构图放出来，今天只看svg这条支线。

了解svg

首先了解何为svg。svg是一种基于XML的矢量图像描述语言，从里面可以获取两个关键信息：XML语言、图像。

上图为BuildAdmin全屏图标的svg文件，可以看到内容是xml，然后最右边是svg表示一个全屏图标。所以我们需要将svg文件加载到Icon中，使其作为图标被使用。

Icon引用svg

在上一篇文章中，Icon只引用了两种图标，这里又加了一个svg的。

重点：svg前缀是 local- ，这里先记住。

BuildAdmin在src/assets/icons下存放了很多svg图片，我们要将这些svg封装到<Icon>中。在BuildAdmin中，使用的是node的fs模块来读取这些svg进行的加载。

然后定义了一个svg组件（这个在后面的实现中细讲）。最后就是在vite中加载这些svg文件，在Icon中使用svg时，会指向这些文件。

svg图标实现

我没有使用上面的方式加载svg，原因是：我使用的是webpack，在编译时无法识别fs这种服务端读取文件的模块，就一直提示无法识别fs模块，最后虽然屏蔽了这些错误，但是同样读取不到svg文件，所以就用使用webpack的svg-sprite-loader来加载svg。

1. svg-sprite-loader

先安装svg-sprite-loader

npm i svg-sprite-loader -D

在vue.config.js中添加loader配置，以前webpack配置都写在webpack.config.js中，后来改了。

这里的include中指定svg的目录，test是目标svg的正则表达式，symbolId是加载的svg图标的新命名，在原本svg的name之前，加了一个 local- 前缀。

2. 加载svg文件

我们要先把svg文件引用进来，才能触发loader加载。

所以写一个方法，使用require.context()生成一个 contextmodule(上下文模块) ，将assets/icons中所有的svg文件，都require引用进来。

然后就是在main.ts中调用加载方法，完成svg文件到图标的加载。

3. 定义svg组件

在components/icon/svg目录下，实现了一个svg的component，定义html原生的svg标签。

<svg>下的<use>中的href属性，需要指定的是svg图标的名字，而绑定的iconName，可以看到是引用的是props.name，即是通过父组件传过来的name属性。

至于size和color都是默认值。

4. 渲染svg

当使用\<Icon>时，如果Icon的name属性前缀为local- 的话，就渲染为svg组件（即3中定义的组件）。

最后，看看如果渲染svg的话，Icon是如何定义name属性。

5. 使用svg

使用了Icon，name为local-lang，这里的local-是前缀，而lang对应的是assets中的lang.svg文件。

在浏览器看一下渲染结果。

这样，这个Icon引用了lang.svg，最终被渲染成了svg，图片右上角的图标也是svg文件加载的。

结语

本篇文章主要讲了本地svg文件，如何通过Icon来渲染成图标，这一块与BuildAdmin的实现是完全不同的，就像在第一篇文章所写的，学习别人的东西，可以理解后照抄，但遇到问题也能自己解决。

我正在参与2024腾讯技术创作特训营第五期有奖征文，快来和我瓜分大奖！