vue2中引入svg图标的方式

最新推荐文章于 2025-05-16 09:20:05 发布

gaoyapei1993

最新推荐文章于 2025-05-16 09:20:05 发布

阅读量4.2k

点赞数 7

CC 4.0 BY-SA版权

文章标签： vue.js

本文链接：https://blog.csdn.net/gaoyapei1993/article/details/123638487

本文介绍了在Vue2项目中如何有效地引入和使用SVG图标。通过详细步骤，包括安装、创建组件、配置文件以及在页面中应用，阐述了SVG图标相对于图片的优势，如内存占用小且适应不同屏幕尺寸。在iconfont官网获取SVG代码，然后在项目中配置并按需引入，实现了SVG图标的灵活使用。

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

说明：在实际的项目开发中，使用svg图标占用内存比图片更小，映入图片内存比较大，同时也适用于不同屏幕的尺寸，

1，安装

npm i svg-sprite-loader --save

2，在components文件夹中新建文件SvgIcon,在文件夹下新建文件index.vue

2,在index.vue文件下写入代码

<template>
    <svg :class="svgClass" aria-hidden="true" v-on="$listeners">
        <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() {
                if (this.className) {