Vueプロジェクトでsvgアイコンを使用

demoコード
インストール依存
取り付けsvg-sprite-loaderおよびsvgo-loader依存

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

構成vue.config.jsファイル

'use strict'
const path = require('path')


function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
    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()
        .before('svg-sprite-loader')
        .use('svgo-loader')
        .loader('svgo-loader')
        .options({
            plugins: [
                {removeAttrs: {attrs: 'path:fill'}}
            ]
        })
        .end();

    }
}

SvgIconコンポーネントの作成
src/componentsの下に新しいフォルダSvgIconおよびファイルindex.vueを作成します.index.vueの内容は次のとおりです.

 

  export default {
    name: 'SvgIcon',
    props: {
      iconClass: {
        type: String,
        required: true
      },
      className: {
        type: String,
        default: ''
      }
    },
    computed: {
      iconName() {
        return `#icon-${this.iconClass}`
      },
      svgClass() {
        if (this.className) {
          return 'svg-icon ' + this.className
        } else {
          return 'svg-icon'
        }
      }
    }
  }

 

svgフォルダとindex.jsの作成
srcの下にiconsフォルダを新規作成し、iconsフォルダの下にsvgフォルダ(svgピクチャを格納するために使用)、index.jsファイルを作成します.index.jsファイルの内容は次のとおりです.

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg  
 
// register globally
Vue.component('svg-icon', SvgIcon)
 
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

main.jsにsvgを導入する
main.jsファイルにグローバルindex.jsを導入

import './icons'

svgコンポーネントの使用

これによりcssを使用してcolorとbackgroundを設定できます.