vue中使用svg矢量图

svg的好处

• 矢量性（无论图片放多大，都不会出现锯齿状模糊）
• 利于seo

vue2中使用svg

1.安装依赖

npm install svg-sprite-loader -D

2.配置vue.config.js

 const resolve = dir => path.join(__dirname, dir);
    // 配置svg
    config.module
      .rule('svg')
      .exclude.add(resolve('src/assets/sprites'))
      .end();
    config.module
      .rule('sprites')
      .test(/\.svg$/)
      .include.add(resolve('src/assets/sprites'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]',
      })
      .end();

3.在src/components下新建svgIcon组件

4.在src/plugins下新建 svg-icon.js文件

import Vue from 'vue';
import SvgIcon from '@/components/svgIcon.vue';// svg component

// register globally
Vue.component('svg-icon', SvgIcon);

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

5.在main.js 中引入

import './plugins/svg-icon';

6.下载svg图片将svg图片放在assets/sprites/下面

7. 在vue文件中使用svg图片(可以通过font-size,color来设置svg图标颜色和大小，设置color时需要将svg文件中的path下面的fill=“#xxx”去除即可)

在 vue3 + vite 中使用

1.安装依赖

yarn add vite-plugin-svg-icons -D
或者
npm i vite-plugin-svg-icons -D

2.配置插件 vite.config.js / vite.config.ts

import viteSvgIcons from 'vite-plugin-svg-icons';
const { resolve } = require('path')
 
export default defineConfig({
  plugins: [
    vue(),
    viteSvgIcons({
      // 配置路径在你的src里的svg存放文件
      iconDirs: [resolve(process.cwd(), 'src/assets/sprites')],
      symbolId: 'icon-[dir]-[name]',
    })
  ]
})

3.存放svg文件路径 /src/assets/sprites

src/assets/sprites

- icon1.svg

- icon2.svg

- icon3.svg

4.SvgIcon组件实现

template>
  

 

 

4.在main.js / main.ts 加入否则报错

import 'vite-plugin-svg-icons/register';
// 需要全局引入再添加
import svgIcon from './components/SvgIcon.vue' // 全局svg图标组件
app.component('svg-icon', svgIcon)

5.在vue 文件中使用