vue svg图标的使用

最新推荐文章于 2025-03-26 15:12:37 发布

油条丝

最新推荐文章于 2025-03-26 15:12:37 发布

阅读量1.2k

点赞数

分类专栏： vue 文章标签： vue svg

本文链接：https://blog.youkuaiyun.com/sinat_38872809/article/details/102989073

版权

本文介绍了在Vue项目中如何使用SVG图标。首先，在需要显示图标的位置插入图标标签。然后，创建并引入SvgIcon组件，将它放置在src/components目录下。接着，将SVG图标文件存放在src/icons/svg目录，并在src/icons/index.js中引入。在main.js中全局导入SvgIcon组件。为了处理SVG图标，需要安装svg-sprite-loader模块，并在webpack配置文件webpack.base.conf.js中添加相应的规则。

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

1. 需要用到图标的地方加入图标标签

<el-input type="text" auto-complete="off" placeholder="账号">
    <svg-icon slot="prefix" icon-class="user"/>
</el-input>

2. 加入SvgIcon组件

src/components目录下加入SvgIcon组件

index.vue代码如下

<template>
  <svg :class="svgClass" aria-hidden="true">
    <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}`
    },
    svgClass() {