vue antd admin怎么切换到basic分支_Vue企业级优雅实战04组件开发01SVG图标组件

预览本文的实现效果：

# gitee

本文主要描写如何让 Vue 工程支持 SVG 图标，以及如何获取 SVG 图标。

Git 本地仓库切换新分支：

git checkout -b 02_SVGIcon

确认分支：

git branch

1 SVG 图标的获取

无论是 SVG 图标，还是 PNG 等其他格式的图标，都可以从阿里的 iconfont 网站上搜索。网址：https://www.iconfont.cn 。

打开网站后，自己注册账号。最简单的使用方式，就是直接搜索你要的图标。举个例子，找个主页的图标：

1、 在首页搜索框搜索“主页”，回车

搜索“主页”

2、 选择需要的图标

3、 鼠标移动到该图标上，点击下载样式的按钮

4、下载或复制该 SVG 图标：

“复制 SVG” 不含文件头，需要手动添加。我的习惯是没有 SVG 图标时，第一次“SVG 下载”，之后创建 SVG 文件，从已下载的 SVG 中复制文件头，然后点击页面上的 “复制 SVG”，将内容贴到 创建的 SVG 文件中。此处先下载该 svg 图标。

该网站也可以创建项目，将你需要的图标添加到项目中，然后一次性生成并下载。我不太喜欢这种使用方式。两个原因：

• 上述方式生成的 class 命名五花八门，也许不符合项目规范；

• 项目是持续迭代的，如果你手动更新命名，迭代过程中需要新图标，你如何叠加进去；

• 我需要些什么图标我自己都不知道，在开发过程中需要什么图标才去搜索下载。

2 使工程支持 SVG

2.1 安装依赖

Vue 项目如果要使用 SVG 图标，需要 SVG Loader。svg-sprite-loader 可以用来加载 svg：

install svg-sprite-loader 

2.2 配置 svg-loader

Vue-cli 3 以上的版本，对 webpack 进行了高度封装，要对 webpack 进行配置，需要在项目根路径下(与 src 同级)创建配置文件：vue.config.js ，在该文件中配置 svg loader。

vue.config.js

const path = 

3 SVG 封装

后面我会将自己封装的组件库，拆分成独立的工程(类似 Element UI、Ant Design Vue 等)，发布 npm 或私服后，通过 npm install 进行安装，便于复用。现在在组件库开发阶段，需要不断迭代完善，为了方便调试测试，故先将组件库放在当前工程的 src/components 目录下。

3.1 封装组件 svg-icon

在 src/components 目录下创建目录 ds-svg-icon, 在该目录中创建 index.vue 文件。该组件提供两个属性：

属性名	类型	属性描述
class-name	String	该图标的样式类(与 HTML 中 class 一样)
icon	String	svg 图标文件的名称

为了编写方便，父组件传递到 svg 组件时可以省略 icon-, 在 svg-icon 中，通过计算属性将这个前缀 icon- 拼接上去。如：图标名称为 icon-home.svg， 使用组件时使用：

src/components/ds-svg-icon/index.vue:

注意：定义的每个组件都要指定 name 属性，name 属性的值，与目录名称保持一致。

3.2 封装为插件

上面创建了 ds-svg-icon/index.vue， 随着开发的进行，后面还有很多组件，我们统一将其封装为插件，每个工程需要使用时，在 main.js 全局引入即可。

在 src/components 目录下创建 index.js：

import DsSvgIcon 

后续组件开发时，都在这个文件中导入，并添加到数组 DSCompoents 中。

在 main.js 中引入组件库，并使用：

import DSComponent 

3.3 icons 目录

在初始化工程的时候，已经创建了 src/icons 目录。在该目录下创建 svg 目录，所有的 svg 文件，都放在这个目录中(src/icons/svg)，现在可以将之前下载的主页 svg 图标拷贝到这个目录下，将其重命名为 icon-home.svg (说明：上面的配置约定 所有 svg 图标都使用前缀 icon-)。

svg 图标拷贝到 src/icons/svg 目录下后还不能立即使用，需要加载它才行。使用一个 js 文件统一全部加载：src/icons/index.js:

const allRequireSvg = 

最后在 main.js 中引入这个 js：

import 

3.4 main.js

到现在为止，main.js 全部代码如下：

import Vue 

4 测试使用组件

在 App.vue 文件中，测试刚才编写的 ds-svg-icon 组件：

重启服务，在浏览器中能看到该图标，则该组件 ok。

提交代码：

add .

合并到 master 分支：

git checkout master

将本地分支分别全部推送到 Gitee 和 GitHub

git push --

---

程序员搞艺术