VUE-SVG引用

VUE-SVG引用

 

第一种方式

svg-sprite-loader的一种方式

 https://www.cnblogs.com/lijianjian/p/10901880.html

 

 

第二种

vue-svg-icon-loader

npm install --save-dev vue-svg-icon-loader
npm install vue-svg-component-runtime

 

 去配置vue.config.js

 

const path = require('path')
function resolve (dir) {
  return path.join(__dirname, './', dir)
}

module.exports = {
 
  chainWebpack: config => {
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule
      .oneOf('inline')
      .use('vue-svg-icon-loader')
      .loader('vue-svg-icon-loader')
      .end()
      .end()
      .oneOf('external')
      .use('file-loader')
      .loader('file-loader')
      .options({
        name: 'assets/[name].[hash:8].[ext]'
      })
    if (process.env.NODE_ENV === 'production') {
      // 解决低版本浏览器 es567错误问题
      // 默认情况下 babel-loader 会忽略所有 node_modules 中的文件。
      // 如果你想要通过 Babel 显式转译一个依赖，可以在这个选项中列出来
      config.module.rule('compile')
        .test(/\.js$/)
        .include
        .add(resolve('src'))
        .add(resolve('test'))
        .add(resolve('node_modules'))
        .end()`在这里插入代码片`
        .use('babel')
        .loader('babel-loader')
        .options({
          presets: [
            ['@babel/preset-env', {
              modules: false
            }]
          ]
        });
    }
  },
}

启动项目

把svg放在assets目录下

 

<template>
  <div>
    <Project class="icon"/>
  </div>
</template>

<script>
import Project from '../assets/svg/project.svg'

export default {
  components: {
    Project,
  },
}
</script>

<style>
.icon {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
}
</style>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

引用：https://www.jianshu.com/p/557cea5fdbd9

引用：https://blog.csdn.net/weixin_43493493/article/details/112369014