Vue使用SVG图标

一、基本概念

SVG（Scalable Vector Graphics）是一种基于 XML 的矢量图形格式，可以在不失真的情况下放大缩小。图标也可以以 SVG 格式进行储存和传播，且在不同的设备上进行缩放仍可保持清晰度。

Vue.js 是一款渐进式的 JavaScript 框架，允许开发者使用 MVVM 模式开发单页面应用。

二、为什么使用SVG图标

使用SVG图标相比于传统的图标格式，具有如下优势：

1、SVG 可以随着视口的尺寸缩放，且不失真。

2、SVG 文本和图形元素可以通过Javascript DOM API 或 Vue 模板动态修改，无需重新生成图像文件。

3、集中精力设计一组 SVG 图标可简化设计师和开发者之间的沟通交流。

三、如何使用SVG图标

在 Vue.js 中使用 SVG 图标的步骤如下：

1. 把 SVG 图标拷贝到 Vue 项目中

把 SVG 图标文件拷贝到 Vue 项目中的某个文件夹。例如，我将它们保存在 src/icons 文件夹中:

  ├─src/
  │  ├─assets/
  │  ├─components/
  │  ├─icons/
  │  │  ├─add.svg
  │  │  └─delete.svg
  │  └─views/
  └─public/

2. 用 vue-svg-icon-loader 对 SVG 进行处理

运行命令 npm install vue-svg-icon-loader -D

  // webpack.config.js
  module.exports = {
    module: {
      rules: [
        {
          test: /\.svg$/,
          loader: 'vue-svg-icon-loader'
        }
      ]
    }
  }

3. 创建一个全局图标注册组件

在 Vue 应用程序中，使用全局图标组件可以轻松包含 SVG 图标：

  // globalSvgIcon.js
  import Vue from 'vue'
  // require.context() 是 webpack 的 API，动态载入符合规则的文件。
  const requireAll = requireContext => requireContext.keys().map(requireContext)
  const req = require.context('@/icons', false, /\.svg$/)
  requireAll(req)
  // 创建全局组件
  Vue.component('svg-icon', {
    template: '',
    props: {
      iconClass: {
        type: String,
        required: true
      },
      className: {
        type: String,
        default: ''
      },
      styleObj: {
        type: Object,
        default: () => ({})
      }
    },
    computed: {
      iconName() {
        return \`#\${this.iconClass}\`
      },
      svgClass() {
        if (this.className) {
          return \`svg-icon \${this.className}\`
        } else {
          return 'svg-icon'
        }
      },
      svgStyle() {
        return this.styleObj
      }
    }
  })

并把这个注册组件在主入口main.js中导入：

  import Vue from 'vue'
  import App from './App.vue'
  import './globalSvgIcon.js' // 引入全局svg-icon组件
  Vue.config.productionTip = false

  new Vue({
    render: h => h(App)
  }).$mount('#app')

4. 在模板中使用图标组件

现在，你就可以在模板文件中使用自定义的 svg-icon 组件进行图标的使用：


原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/197986.html