vue2中使用svg

vue2中使用svg

以vue2项目为例

1. 下载loader

npm i svg-sprite-loader

2. 创建svg相关组件

在src下components创建SvgIcon文件夹，文件下组件index.vue内容如下：

<template>
    <svg :class="['svg-icon', className]" 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}`;
      },
    },
  };
  </script>
  
  <style scoped>
  // svg图标样式，可自行进行修改
  .svg-icon {
    width: 10rem;
    height: 10rem;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
  </style>
  

3. 创建svg全局组件

在src下创建utils，utils下创建icons的index.js文件，内容如下

import Vue from "vue";
// svg组件
import SvgIcon from "@/components/SvgIcon";

// 全局组件注册
Vue.component("SvgIcon", SvgIcon);

// 工程化导入所有 svg 资源（context后面即svg资源放置路径）
const req = require.context("../../assets/icons/svg", false, /\.svg$/);
const requireAll = (requireContext) =>
  requireContext.keys().map(requireContext);
requireAll(req);

4. vue.config.js里面进行svg配置

const path = require("path");

/**
 * 路径替换
 * @Date: 2022-09-27 10:48:54
 * @param {string} dir: 需要替换的文件路径
 * @return {string} 替换后的文件绝对地址
 */
function resolve(dir) {
    
    
  return path.join(__dirname, dir);
}

module.exports = {
    
    
  chainWebpack: (config) => {
    
    
    /**
     * 将svg图片以雪碧图的方式在项目中加载
     */ 
    config.module
      .rule('svg')
      .exclude.add(resolve('src/assets/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/icons')) // svg所在路径
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
    
    
        // 参数配置
        symbolId: 'icon-[name]',
      })
  },
};

5. main.js中引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入svg相关文件
import './utils/icons/index.js'
Vue.config.productionTip = false

new Vue({
    
    
  router,
  store,
  render: function (h) {
    
     return h(App) }
}).$mount('#app')

6. 在vue页面中使用

<template>
  <div class="home">
    // iconClass即svg的文件名
    <SvgIcon iconClass="heart" />
  </div>
</template>

<script>
export default {
  name: 'Home',
}
</script>

我引入的是阿里巴巴矢量图标库下载的一个心形svg图片，效果如下：

7. 整个文件目录如图所示