Vue-cli3.0 svg-sprite-loader 配置

最新推荐文章于 2024-08-23 09:56:18 发布

蜡笔小心丶

最新推荐文章于 2024-08-23 09:56:18 发布

阅读量712

点赞数

分类专栏： vue.js 文章标签： vue-cli3.0 svg-sprite-loader

本文链接：https://blog.csdn.net/u011615787/article/details/97007062

版权

vue.js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

安装svg-sprite-loader

npm install svg-sprite-loader --save

在项目根目录中打开 vue.config.js

const path = require('path');
function resolve(dir) {
    return path.join(__dirname, dir)
}
module.exports = {
  chainWebpack: config => {
    config.resolve.alias
        .set('@', resolve('src'))
    config.module.rules.delete("svg"); //重点:删除默认配置中处理svg
    config.module
        .rule('svg-smart')
        .test(/\.svg$/)
        .include
        .add(resolve('src/icons')) //处理svg目录
        .end()
        .use('svg-sprite-loader')
        .loader('svg-sprite-loader')
        .options({
            symbolId: 'icon-[name]'
        })
  }
}

在src目录下新建index.js

import Vue from 'vue'
import iconSvg from '@/components/svgIcon/iconSvg'

Vue.component('icon-svg', iconSvg)

const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

在components目录下新建文件夹svgIcon，并在该文件夹中新建iconSvg.vue

<template>
  <svg class="svg-icon" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>
<script>
export default {
  name: 'icon-svg',
  props: {
    iconClass: {
      type: String,
      required: true
    }
  },
  computed: {
    iconName () {
      return `#icon-${this.iconClass}`
    }
  }
}
</script>

<style>
  .svg-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
</style>

最后，在main.js中导入icons