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/zh-tw/n/197986.html