在vue3中封装使用svg图标

最新推荐文章于 2025-04-26 09:05:25 发布

原创最新推荐文章于 2025-04-26 09:05:25 发布

· 2.3k 阅读

6 ·

版权

文章标签：

#vue.js #前端 #javascript

Vue 专栏收录该内容

6 篇文章

订阅专栏

在vue项目中使用svg矢量图，下面我们以阿里巴巴图标库为例

1、阿里svg矢量图官网：官网地址

2、进入图标库，选好自己的喜欢的图标加入购物车，添加到项目

3、下载该项目所有图标到本地

在这里插入图片描述
要处理颜色的话，可以选择批量操作批量去色

4. 下载好的项目解压，复制下面这两个文件到vue项目中

主要是iconfont.js文件，html文件是为了方便看使用图标对应的类名
解压后：
在这里插入图片描述

5.将svg的js文件引入到main.js

import './assets/svgs/iconfont'

在这里插入图片描述

6.在页面中使用

在这里插入图片描述

7.统一修改图标颜色大小

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    color: #05d1ca;     // 颜色
    font-size:14px;     // 大小
  }

提示：可以打开下载到本地文件的html文件查看对应图标的类名

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

今夜來看雪

关注关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

「Vue组件化」封装SVG图标

拥抱AI Design

07-18

812

首先创建一个用于加载SVG文件的Vue组件。将SVG文件放在项目的某个目录下，例如components/svgIcon/。创建一个函数来动态导入SVG文件，并注册到Vue组件中。在项目中通过组件标签使用SVG图标。

Vue2后台管理项目封装使用svg图标

ssxx_zzyy_baba的博客

03-12

965

此作者很懒，什么也没有留下如有错误欢迎大佬指教。

参与评论您还未登录，请先登录后发表或查看评论

Vue3 -- 配置SVG图标【项目集成4】

qq_53002037的博客

11-15

1369

配置svg图标，并解决所有飘红的问题及全局配置

Vue3中使用svg图标

LQlove1的博客

05-21

3390

【代码】Vue3中使用svg图标。

如何在vue3的项目中使用svg图标并且封装

最新发布

CoolMa2001的博客

04-26

665

接着在src/components/icon文件夹下创建一个svgIcon.vue组件。用svg组件现在的svg组件已经全局注册好了直接用icon-svg包裹就行了。在组件用icon-svg 标签传入name即可 name的形式一定是。我的footer组件代码，给组件加了一点点样式。配置完整代码，注意一定要引入path模块。配置Vite.config.ts。在main.ts入口文件引入。代码（第八行和第20行）这些是我的svg图标和命名。完整代码（12行代码）全局注册一下svg组件。

vue3使用SVG图标

qq_52377225的博客

02-02

797

vue svg图标使用

vue3使用svg图标

weixin_56204435的博客

06-26

816

创建svg目录 index.js main.js vue.config.js 使用

vue3中使用svg图标

weixin_62216253的博客

04-22

1691

vue3中使用svg

Vue3+vite项目引入svg图标并使用（封装svg组件）

蓝胖子的博客

03-26

946

Vue3+vite项目引入svg图标并使用（封装svg组件）

如何使用Svg矢量图封装引用到vue3项目中

炑焽的博客

08-30

2415

在现代前端开发中，SVG（可缩放矢量图形）因其高质量和灵活性成为了图标和图形设计的热门选择。对于 Vue 3 项目而言，将 SVG 图标封装和引用到项目中不仅能提升性能，还能带来更高的可维护性和一致性。SVG 图标本质上是矢量图形，因此无论放大还是缩小，图像都不会失真，这使得它们在响应式设计中表现尤为出色。此外，通过封装 SVG 图标，可以将图标的样式和行为与组件紧密结合，简化管理和重用的过程。这种做法不仅优化了开发流程，也提升了用户体验。

浅析vue cli3 封装Svgicon组件正确姿势(推荐)

10-15

为了使 SVG 图标能够在项目中正常使用，我们需要在 `vue.config.js` 中配置 webpack 的 loader。安装 `svg-sprite-loader` 插件： ```bash npm i svg-sprite-loader -D ``` 然后，在 `vue.config.js` 中添加以下...

vue3使用svg图标多种方式

一步一个脚印，踏实努力，向着目标前进

08-15

8762

在Vue 3中，可以使用多种方式来使用SVG图标。

vue3实战-----封装和使用svg图标

太阳与星辰的博客

02-13

2458

vue3中封装使用svg图标

Vue3项目使用SVG图标

seapackk的博客

04-11

1028

注意： symbolId 的值需要与 vite.config.ts中配置的保持一致。：在项目运行时就生成所有图标,只需操作一次 dom。vite-plugin-svg-icons 的优点。创建一个SPIcon组件，封装svg。：内置缓存,仅当文件被修改时才会重新生成。在vite.config.ts中进行配置。最终symbolId的值格式为。在main.ts文件中引入。

如何将svg封装为全局组件

m0_73504190的博客

06-16

412

在src文件夹目录下创建一个index.ts文件：用于注册components文件夹内部全部全局组件！在入口文件引入src/index.ts文件,通过app.use方法安装自定义插件。首先，在src/components目录下创建一个svgIcon组件。

vue3使用svg图标多种方式

热门推荐

weixin_45441173的博客

01-16

1万+

vue3使用svg图标多种方式

vue3中使用svg

ahwangzc的博客

02-08

455

vue3.0中使用svg图标

vue3使用svg（无废话版）

m0_56104994的博客

08-02

1223

vue3使用svg

vue2项目中使用svg图标原创

10-10

在Vue2项目中，使用SVG（Scalable Vector Graphics）图标可以带来许多优势，比如矢量图形不受分辨率影响、体积小、加载快等。如果你想要使用原创的SVG图标，你可以按照以下步骤操作： 1. **创建SVG文件**：使用Illustrator、Sketch或其他矢量图形工具设计SVG图标。保持设计简洁明了，尽量避免过多的颜色和复杂的路径。 2. **保存SVG文件**：将设计导出为SVG格式，确保文件包含了XML声明和视图盒（`<svg>`标签），以及优化过的路径数据。 3. **封装到.vue文件**：为了便于复用和管理，可以将SVG作为组件编写，创建一个名为Icon.vue的文件，内容类似这样： ```html <template> <symbol id="my-icon" viewBox="0 0 24 24"> <path d="..."/> </symbol> </template> <script> export default { name: 'MySvgIcon', components: { }, data() { return { iconPath: '#my-icon' } } } </script> ``` 这里`viewBox`属性设置图标在24x24像素的坐标空间范围。 4. **在需要的地方使用**： ```vue <use :href="iconPath" class="your-icon-class"></use> ``` `:href`绑定到SVG组件的数据属性，动态显示对应的SVG图标。 5. **CSS样式**：如果需要，可以添加一些基本的CSS样式调整图标大小、颜色或位置。