《Vue3笔记》第12节：Vue3项目采用SVG方式引入图标文件

最新推荐文章于 2025-04-13 19:43:44 发布
最新推荐文章于 2025-04-13 19:43:44 发布
阅读量240 收藏
点赞数 5
CC 4.0 BY-SA版权
分类专栏： 【Vue3项目开发】 文章标签： Vue3 SVG图标 Vue3引入SVG图标 Vue3图标 使用SVG作为图标
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_39826207/article/details/144804167

这篇文章还是基于之前的代码工程之上，介绍Vue3项目中如何采用SVG方式引入图标。

Vue3项目开发（微信文章集合）

1.1、下载图标

iconfont是阿里巴巴提供的一个图标素材库，这个图标库中有非常多的icon图标，可以直接搜索自己想要的图标，还支持调整颜色、大小、图标样式等等功能。

iconfont图标库：https://www.iconfont.cn/search/index

在这里插入图片描述

在Vue3项目中，我们可以直接从iconfont图标库中下载SVG文件，然后将SVG图标文件放

了解本专栏 订阅专栏 解锁全文 超级会员免费看
《Vue3笔记》第11节：Vue3项目引入Font Awesome图标库
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 优快云 记录学习心得和笔记内容。
12-30 217
这篇文章还是基于之前的代码之上，介绍Vue3项目中如何引入第三方的图标库。前一个小节介绍了如何引入中的图标库，但是中的图标很少，有可能不满足我们的需求，这个时候就需要使用第三方的图标库，这个小节介绍如何引入图标库。是一个第三方提供的图标库，v5版本提供了1820个图标，可以覆盖大部分的图标使用场景了，可以去官网查看有哪些图标。
《Vue3笔记》第10节：Vue3项目引入Element Plus图标库
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 优快云 记录学习心得和笔记内容。
12-27 375
这篇文章基于之前的项目代码之上，介绍Vue3项目中如何引入Element Plus的图标库组件。
Vue 支持下载 svg 图片
从器之道 从一而终
04-29 1294
Vue-element-admin 的图标库，在本项目里面非常方便使用，但是其他项目也需要这个图标时，下载就非常麻烦， 需要翻代码。为了解决这个问题， 我在分析了svg的代码之后，实现了svg图片的在线下载。其主要思路就是将 SVG 内容转换为 image/svg+xml 格式，并将其放置在一个带有下载属性的 a 标签上，从而实现点击下载。
vue3+vite，集成svg图标
weixin_65116989的博客
05-11 2184
项目中的图片icon使用svg代码替换，缩小项目体积。包含下载配置和使用，并且封装成全局可用的组件
Vue3引入阿里巴巴矢量多彩图标库（下载至本地引入）
qq_30306717的博客
03-22 2369
阿里巴巴矢量图标库官网https://www.iconfont.cn/ 1、把选好的矢量图标库下载至本地并解压 2、复制解压的文件到项目中 3、在项目中配置 1、main.js/ts中配置 2、引入样式 /*阿里巴巴矢量图标库配置，样式写在全局中*/ .icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; ...
小白详解Vue3项目中怎么引入 SVG 图标
qq_29701691的博客
09-01 5518
既然是页面，肯定离不开一些图标 icon ，所以肯定要去最全的 阿里图标库 来寻找。创建好项目后，我们进入到 阿里的 素材库 里面找一些后续需要的图标，进行解压，删除不必要的东西，只留下 iconfont.js 文件即可。那我们只能将项目里的图标，选择 Symbol 并 下载至本地。这里讲解下如何将 阿里图标库 里面的东西，放到我们的页面上。进入页面，找到 资源管理 下面的 我的项目，并创建项目。引入 阿里的 SVG 图标到项目中。将 购物车 里面的图标添加到项目中。并添加到 购物车 中，...
vue3项目导入本地图标
qq_19688207的博客
07-29 1032
1.将存有图标的svg文件夹拷贝到vue项目src/assets/icons目录下。3.下载的压缩包解压到本地，并将解压的图标文件拖拽进新创建的svg文件夹中。2.在 src /components文件夹目录下，创建一个svg组件。3.在main.js或者main.ts中配置全局。main.js或者main.ts引入注册脚本。注意：icons目录需要自己创建。2.自己的图标库下载入库的图标。1.安装svg图标引用所需插件。
《Vue3笔记》第17节：Vue3项目实现点击图标进入全屏显示的功能
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 优快云 记录学习心得和笔记内容。
01-22 322
前一个小节内容中，已经将管理后台首页面的头部信息栏实现了，这个小节来看下如何实现点击图标，实现全屏显示、退出全屏显示的功能。
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
01-18
针对上一篇文章，进行对svg文件里面的元素进行赋值和放大缩小的补充笔记 svg元素赋值 1. 先看看svg文件的代码 思路：我的想法就是循环拿到里面的id，然后跟后台的数据匹配，然后赋值。因为后台返回的数据id是没有...
在 Vue 项目中全局引入图标，可以通过以下步骤实现：
靡不有初，鲜克有终
03-05 461
选择一个图标库，比如 `@element-plus/icons-vue`（Element Plus 的图标库）或 `@ant-design/icons-vue`（Ant Design Vue 的图标库）。如果你使用的是其他图标库，比如 `@ant-design/icons-vue`，步骤类似，只需调整安装包和注册方式即可。#### 配置 `vite.config.js` 或 `vue.config.js`通过以上方法，你可以在 Vue 项目中全局引入图标库，方便在项目中使用图标。
vue3 中使用 icon 图标的 3 种方案
2301_80826038的博客
09-11 1万+
这里我封装的支持 prefix、name、size、color、spin（是否旋转）等属性。我们在浏览器中打开调试工具，看看 application ，发现这里缓存的一些图标。这里注意 iconDirs 的路径，是读取的 svg icon 存放的目录。下次请求的时候直接从缓存中读取的。如果 element 的 icon 不满足我们的需求的话，我们可以从。iconify 是一种非常广泛的图标解决方案，它收集了全网所有的图标。如果你想用字符串的形式，可以这样搞。下载一个 svg 格式的图标。
Vue项目中通过svg代码引入iconfont图标
最新发布
samroom的博客
04-13 537
在vue项目中通过svg代码引入图标
VUE3图标库引入
qq_63494932的博客
04-27 1464
VUE3图标库引入
vue3项目引入第三方图标（阿里图标）
kanno的博客
03-01 1634
vue3项目引入第三方图标（阿里图标）
在vue3项目中引入element-plus的Icon图标
weixin_44775694的博客
05-21 1万+
Element Plus 是为适配 Vue3 而对 Element UI 进行重构后产生的前端组件库，包含丰富的基础组件。官方网址为：一个 Vue 3 UI 框架 | Element Plus 在Vue项目中使用Element-plus的Icon图标，包括按钮和动态菜单等，接下来是引入在vue3项目中引入Icon图标的步骤。 安装（使用包管理器）： # 选择一个你喜欢的包管理器 # NPM $ npm install @element-plus/icons-vue # Yarn $ y...
vue3+svg图标的使用
weixin_69318049的博客
02-17 481
vue3+vite svg使用奶妈级教学
vue3项目中引入icon font图标使用
weixin_42255789的博客
01-17 1387
vue3项目中引入icon font图标使用
ElementPlus结合Vue3使用方法
skymoon2012的博客
10-28 688
<html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1.0" /> <script src="https://unpkg.com/vue@next"></script> <!-- import CSS --> <link .
vue导入图标的3种方式【阿里图标】
热门推荐
weixin_41027083的博客
03-22 1万+
第一种方式 Font class- css 点击【 Font class 】- 【 下载至本地 】，解压之后导入到项目【/src/assets/icon】，这个是【iconfont.css】文件。 @font-face { font-family: "iconfont"; /* Project id 3262995 */ src: url('iconfont.woff2?t=1647910536684') format('woff2'), url('iconfont.woff?t=1
VueMindmap：基于Vue.js的思维导图组件
安装完成后，开发者需要通过import语句引入VueMindmap以及其相关的样式文件，以便在项目中使用VueMindmap。" 详细知识点: 1. **Vue.js框架**: Vue.js是一个渐进式的JavaScript框架，用于构建用户界面。它易于上手，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mr.小朱同学

随心赞赏，助力前行

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值