Vue-使用svg-icon

最新推荐文章于 2025-04-22 10:32:31 发布

打瞌睡的禅师

最新推荐文章于 2025-04-22 10:32:31 发布

阅读量1k

点赞数

文章标签： vue.js css typescript webpack

本文链接：https://blog.youkuaiyun.com/qq_32644987/article/details/120816201

版权

本文介绍了如何在Vue应用中利用SVG可缩放矢量图形创建自定义图标，通过封装SvgIcon组件并配置svg-sprite-loader，实现颜色自定义和全局引用。详细步骤包括SVG组件模板、script和样式编写，以及webpack配置和实际使用的示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、svg

svg是一种可缩放矢量图形：改变尺寸的情况下其图形质量不会有损失
可自定义填充颜色

2、创建svg-icon组件

由于直接使用svg并不方便，再次我们需要进行进一步封装；在components下新建SvgIcon文件

<template>
  <svg class="__icon" aria-hidden="true">
    <use :xlink:href="fullName"></use>
  </svg>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";

@Options({
  props: {
    name: String,
  },
  computed: {
    fullName() {
      return `#icon_${this.name}`;
    },
  },
})
export default class SvgIcon extends Vue {}
</script>

<style scoped lang="scss">
.__icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>

以上代码我们需要注意两点

currentColor：css中使用该变量后，用户可自定义color填充颜色
fullName：svg名称（symbolId），结合后面svg-sprite-loader配置使用

3、引用SvgIcon组件

svg文件路径：@/assets/svg

在main.js入口文件注册SvgIcon组件

import SvgIcon from '@/components/SvgIcon/index.vue'// svg component

// 公用全局本地 svg icon
const requireAll = (requireContext: any) => requireContext.keys().map(requireContext);
const req = require.context('@/assets/svg', true, /\.svg$/);
requireAll(req);

createApp(App)
    .use(store)
    .use(router)
    .component('svg-icon', SvgIcon)
    .mount("#app");

4、配置

首先安装svg-sprite-loader（npm install svg-sprite-loader --save-dev），完成后在vue.config.js文件进行配置：

const path = require('path');
const resolve = dir => path.join(__dirname, dir);

module.exports = {
    chainWebpack: config => {
        // use svg
        const svgRule = config.module.rule('svg');
        svgRule.uses.clear();
        svgRule.include
            .add(resolve('src/assets/svg')) // svg文件路径
            .end()
            .use('svg-sprite-loader')
            .loader('svg-sprite-loader')
            .options({
                symbolId: 'icon_[name]', // svg-icon组件内部的名称规则
            });
    }
}

5、使用svg-icon

完成以上操作，我们便可以使用svg-icon组件了：

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <svg-icon name="bug" />
  </div>
</template>

页面显示：
在这里插入图片描述
修改颜色：