Vue中引入svg图标的方式

最新推荐文章于 2025-04-19 09:14:51 发布

十里不故梦

最新推荐文章于 2025-04-19 09:14:51 发布

阅读量3.9k

点赞数 4

分类专栏： Vue 文章标签： svg vue vue.js 前端

本文链接：https://blog.youkuaiyun.com/weixin_53430951/article/details/112525341

版权

本文介绍了在Vue项目中引入SVG图标的两种方法：一种是通过注册SVG组件并在全局使用；另一种是利用svg-sprite-loader加载SVG图标，创建SvgIcon组件，并在页面中按需引入。

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

Vue中引入svg图标的方式

Vue中引入svg图标的方式一

安装

yarn add svg-sprite-loader --dev

svg组件
在这里插入图片描述
index.vue

<!-- svg组件 -->
<template>
    <svg class="svg-icon" :class="svgClass" aria-hidden="true">
        <use :xlink:href="iconName" />
    </svg>
</template>

<script>
export default {
    
    name: 'SvgIcon',
    props: {
    
        // svg 的名称
        svgName: {
    
            type: String,
            required: true
        }
    },
    computed: {
    
        iconName () {
    
            return `#icon-${
      this.svgName}`
        },
        svgClass () {
    
            if (this.svgName) {
    
                return 'svg-icon' + this.svgName
            } else {
    
                return 'svg-icon'
            }
        }
    }
}
</script>

<style lang="less" scoped>
.svg-icon {
    
    width: 100px;

最低0.47元/天解锁文章