Vue企业级优雅实战04-组件开发01-SVG图标组件

（后续的文章 公众号会提前一周更新，欢迎关注文末的微信公众号：程序员搞艺术） 预览本文的实现效果：

# gitee
 
git clone git@gitee.com:cloudyly/dscloudy-admin-single.git

# github

git clone git@github.com:cloudyly/dscloudy-admin-single.git

git checkout 02_SVGIcon

 

本文主要描写如何让 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：

npm install svg-sprite-loader --save-dev

2.2 配置 svg-loader

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

vue.config.js

const path = require('path')

const resolve = dir => path.join(__dirname, dir)

​

module.exports = {

  chainWebpack: config => {

    const svgRule = config.module.rule('svg')

    svgRule.uses.clear()

    svgRule.test(/\.svg$/)

      .include.add(resolve('src/icons/svg'))

      .end()

      .use('svg-sprite-loader')

      .loader('svg-sprite-loader')

      .options({

        symbolId: '[name]'

      })

      .end()

  }

}

 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， 使用组件时使用：

<svg-icon :icon-name="home"></svg-icon>

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

 

<template>

  <svg :class="svgClass" aria-hidden="true">

    <use :xlink:href="svgIcon"></use>

  </svg>

</template>

​

<script>

export default {

  name: 'ds-svg-icon',

  props: {

    icon: {

      type: String,

      required: true

    },

    className: {

      type: String,

      required: false,

      default: ''

    }

  },

  computed: {

    svgClass () {

      return `ds-svg-icon ${this.className}`

    },

    svgIcon () {

      return `#icon-${this.icon}`

    }

  }

}

</script>

​

<style scoped lang="scss">

  .ds-svg-icon {

    width: 1em;

    height: 1em;

    vertical-align: -0.15em;

    fill: currentColor;

    overflow: hidden;

  }

</style>

 

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

3.2 封装为插件

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

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

 

import DsSvgIcon from './ds-svg-icon'

const DSComponents = [

  DsSvgIcon

]

​

function plugin (Vue) {

  if (plugin.installed) {

    return

  }

  DSComponents.forEach(component => {

    Vue.component(component.name, component)

  })

}

export default plugin

 

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

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

import DSComponent from '@/components'

...

Vue.use(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 = require.context('./svg', false, /\.svg$/)

const requireAll = requireContext => requireContext.keys().map(requireContext)

requireAll(allRequireSvg)

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

import '@/icons/index'

 

3.4 main.js

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

 

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'

import i18n from '@/i18n'

import ElementUI from 'element-ui'

import '@/assets/scss/index.scss'

import DSComponent from '@/components'

import '@/icons/index'

​

Vue.use(ElementUI, {

  size: 'mini',

  i18n: (key, value) => i18n.t(key, value)

})

Vue.use(DSComponent)

​

Vue.config.productionTip = false

​

new Vue({

  router,

  store,

  i18n,

  render: h => h(App)

}).$mount('#app')

4 测试使用组件

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

 

<ds-svg-icon icon="home"></ds-svg-icon>

 

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

提交代码：

 

git add .

git cz

[组件开发] SVG图标组件

 

合并到 master 分支：

git checkout master

git merge 02_SVGIcon

 

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

git push --all gitee_origin

git push --all github_origin

 

---

更多内容请关注我的个人公众号，留言可加我个人微信或交流问题