如何在vue中使用svg图片及修改样式

如何在vue中使用svg

1、直接使用<img>标签

<template>
    <div>
        <img src="@/assets/my-icon.svg"/>
    </div>
</template>

2、直接嵌入svg的源代码

<template>
  <div>
    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
      <path d="M512 0l512 512H0z" fill="#ff0000" />
    </svg>
  </div>
</template>

3、使用vue-svg-loader

如果你想要在vue中以组件的方式使用svg，可以使用vue-svg-loader这个库。它允许你将svg文件直接导入为vue组件。

未使用vite

安装

npm install vue-svg-loader --save-dev

接下来，在webpack中添加vue-svg-loader。如果你使用vue cli，通常在vue.config.js文件中配置:

module.export = {
    module: {
        rules: [{
            test: /\.svg$/,
            loader: 'vue-svg-loader',
            options: {

            }
        }]
    }
}

使用svg组件

<template>
    <div>
        <MyIcon/>
    </div>
</template>

<script>
    import MyIcon from '@/assets/my-icon.svg'

    export default {
        components: {
            MyIcon
        }
    }
</script>

使用vite

如果使用vite创建项目，vite不直接支持vue-svg-loader，但可以使用vite-plugin-vue2-svg或vite-plugin-vue3-svg，根据你的vue版本选择一个插件。插件会使用vue-svg-loader来处理svg文件。

vue3 项目

npm install vite-svg-loader --save-dev

在vite.config.js中进行如下配置: 

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import svgLoader from 'vite-svg-loader';

export default defineConfig({
    plugins: [
        vue(),
        svgLoader(), //添加插件
    ]
})

vue2 项目

npm install vite-plugin-vue2-svg vue-svg-loader --save-dev

在vite.config.js中配置:

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue2';
import svgLoader from 'vite-plugin-vue2-svg';
 
export default defineConfig({
  plugins: [
    vue(),
    svgLoader({
      svgoConfig: {}, // 可选项，配置 SVGO
    }),
  ],
});

4、使用css背景图

<template>
  <div class="icon"></div>
</template>
 
<style scoped>
.icon {
  width: 100px; /* 控制图标宽度 */
  height: 100px; /* 控制图标高度 */
  background-image: url('@/assets/my-icon.svg');
  background-size: cover; /* 使背景图像完全覆盖 */
}
</style>

总结

你可以根据项目的具体需求选择合适的方法。如果需要动态/统一控制svg的样式或行为，建议使用vue-svg-loader方法；否则使用嵌入、<img>标签或css背景图。

如果使用了vite，使用vite-svg-loader或vite-plugin-vue2-svg插件能够让你再vite中顺利加载svg文件，并以组件的形式直接使用。

如何修改样式

1、通过css直接控制svg样式

<template>
    <div>
        <MyIcon class="custom-icon"/>
    </div>
</template>

<script>
import MyIcon from '@/assets/my-icon.svg';

export default {
    components: {
        MyIcon
    }
}

</script>

<style scoped>
    .custom-icon {
        width: 50px;
        height: 50px;
        fill: red; //改变svg颜色
     }
</style>

注意：如果svg内部使用了fill属性指定颜色，则需要将fill属性设置为currentColor才能由css控制，也可以将fill属性去掉。

2、 使用穿透选择器 >>> 控制svg子元素的样式

如果你的svg元素内含有嵌套的元素(例如多个<path>或<circle>)，你可以使用穿透选择器 >>> 来控制其子元素的样式：

<template>
    <div>
        <MyIcon class="custom-icon" />
    </div>
</template>

<style scoped>
    .custom-icon >>> path {
        fill: blue;
    }
</style>

总结

使用svg组件时，可以用fill: currentColor(或者不设置fill属性)结合css类、style等多种方式调整样式，从而获得极大的灵活性，这也是svg在前端开发中越来越受欢迎的原因之一。