vue中svg图片处理插件vue-svgicon使用教程

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

原创最新推荐文章于 2025-05-16 09:20:05 发布 · 3.7k 阅读

6 ·

CC 4.0 BY-SA版权

vuejs 同时被 3 个专栏收录

130 篇文章

订阅专栏

插件

11 篇文章

订阅专栏

svg

1 篇文章

订阅专栏

vue-svgicon是一款用于创建SVG图标组件的工具，通过简单的配置即可将SVG图标转换为Vue组件，支持全局样式定制及多种旋转效果，便于开发者在项目中高效使用图标资源。

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

vue-svgicon

一个创建 svg 图标组件的工具

官方文档：https://github.com/MMF-FE/vue-svgicon

使用方式

安装

// 安装到全局
npm install vue-svgicon -g

// 安装到项目
npm install vue-svgicon --save-dev

使用 npm scripts配置图标解析和输出路径

// package.json
// 生成 svg 图标组件, -s: svg 源文件，-t: 图标组件生成路径
{
    "scripts": {
    "svg": "vsvg -s ./src/icons/svg -t ./src/icons/components --ext ts --es6"
    }
}

全局样式

首先，需要为 vue-svgicon 在全局写一些样式代码。推荐的代码如下：

/* recommended css code for vue-svgicon */
.svg-icon {
display: inline-block;
width: 16px;
height: 16px;
color: inherit;
vertical-align: middle;
fill: none;
stroke: currentColor;
}

.svg-fill {
fill: currentColor;
stroke: none;
}

.svg-up {
/* 默认 */
transform: rotate(0deg);
}

.svg-right {
transform: rotate(90deg);
}

.svg-down {
transform: rotate(180deg);
}

.svg-left {
transform: rotate(-90deg);
}

在main.js中引入svgIcon组件并且全局注册 vue-svgicon 组件

// main.js
import Vue from 'vue'
import App from './App.vue'
import SvgIcon from 'vue-svgicon'

// Default tag name is 'svgicon'
Vue.use(SvgIcon, {
tagName: 'svgicon'
})

new Vue({
el: '#app',
render: h => h(App)
})

执行下npm run svg命令

在组件中使用图标组件

<!-- App.vue -->
<template>
    <div id="app">
        <p>
            <svgicon
                name="404"
                width="200"
                height="200"
                color="#42b983 #35495e"
            ></svgicon>
        </p>
    </div>
</template>

<script>
// �使用之前需要引入生成的图标�
import 'src/icons/components/404'

export default {
    name: 'app',
    data() {
        return {
            msg: 'Welcome to Your Vue.js App'
        }
    }
}
</script>