在一個新項目中使用svg-icon元件的步驟

1. 首先要安裝依賴

npm i [email protected]
           

2. 在vue.config.js中補充一個配置

chainWebpack (config) {
    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  }
           

3.建立檔案src/icons

* @param {string} path
 * @returns {Boolean}
 */
export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}
           

src/icons
-       /svg       # 儲存圖示
-       /index.js  # 注冊全局元件
           

• index.js中的代碼

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component

// register globally
// 注冊成全局元件
Vue.component('svg-icon', SvgIcon)
// 自動關機加載所有的./svg目錄下的圖檔檔案 ,之後可以直接使用檔案名
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
           

• 建立檔案  componets/SvgIcon/index.vue(元件)
• 建立檔案  utils/validate.js (上邊的元件中用到了其中的驗證規則)

* @param {string} path
 * @returns {Boolean}
 */
export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}
           

4. 在main.js中引入

import '@/icons'
           

5. 使用

使用格式 : <svg-icon icon-class="檔案名"/>

檔案名就是src/icons/svg下的檔案名

6.一個學習網站 , 一個阿裡巴巴矢量圖示庫

SVG教程

阿裡巴巴矢量圖示庫   可以直接搜尋相關的svg圖示 , 找到後下載下傳或者複制代碼