如何在vue中使用svg

1、安装依赖

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

2、在config文件中配置

const path = require('path');

　　function resolve(dir) {

　　　　return path.join(__dirname, dir)

　　}


 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/components下新建文件夹及文件SvgIcon/index.vue，index.vue中内容如下

index.vue中的代码如下

<template>

  <svg :class="svgClass" aria-hidden="true" v-on="$listeners">

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

  </svg>

</template>

<script>

  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'

        }

      }

    }

  }

</script>

<style scoped>

  .svg-icon {

    width: 1em;

    height: 1em;

    vertical-align: -0.15em;

    fill: currentColor;

    overflow: hidden;

  }

</style>

4、在src下新建icons文件夹，及icons文件夹下svg文件夹、index.js文件， 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)

5、在main.js中引入

import '@/icons' // icon

6、在项目中使用

在阿里icon适量图库随便下载个svg格式的图，

在svg文件夹下，创建一个test.svg文件，将复制下来的svg代码贴进去

在项目中使用

<svg-icon icon-class="test"></svg-icon>

效果：

巴特西

如何在vue中使用svg

最新文章

热门文章