vue安装svg 依赖包,配置全局svg组件-蒲公英云

vue安装svg 依赖包,配置全局svg组件

朱雀 2023-02-17 02:56 365阅读 0赞

1，终端安装 npm

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

2，自定义组件

在src下创建一个icons文件夹，创建一个index.js页面和 svgIcons.vue页面，再创建一个svg的文件夹用来存放我们要用到的svg图片。

svgIcons.vue页面：

<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconName"></use>
  </svg>
</template>
<script>
export default {
  name: 'svg-icon',
  props: {
    iconClass: {
      type: String,
      required: true
    },
    className: {
      type: String
    }
  },
  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: 1.2em;
  height: 1.2em;
  vertical-align: -0.18em;
  fill: currentColor;
  overflow: hidden;
}
</style>

index.js页面：

import Vue from 'vue'
import SvgIcon from './svgIcon.vue' // svg组件
// register globally 全局注册
Vue.component('svg-icon', SvgIcon)
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./svg', false, /\.svg$/)
// （创建了）一个包含了 svg 文件夹（不包含子目录）下面的、所有文件名以 `.suv` 结尾的、能被 require 请求到的文件的上下文。
// 这个是webpack提供的require方法，可以创建上下文环境。相当于将svg目录下的svg文件require进来。
requireAll(req)

3，在main.js引入

4，配置svg环境

在我们的vue.config.js文件配置：

配置路径：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70

configureWebpack: (config) => { // webpack配置，值位对象时会合并配置，为方法时会改写配置
    Object.assign(config, { // 开发生产共同配置
      resolve: {
        alias: {
          'vue':'vue/dist/vue.js',
          '@': path.resolve(__dirname, './src'), //设置路径别名
           '@c':path.resolve(__dirname, './src/components')
        }
      }
    })
  },

配置svg 环境：

chainWebpack: config => {
    //一个规则里的 基础Loader
    // svg是个基础loader
    const svgRule = config.module.rule('svg')
    // 清除已有的所有 loader。
    // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
    svgRule.uses.clear()
    // 添加要替换的 loader
    svgRule
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
  },