预览本文的实现效果:
# 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 --