vue如何使用iconfont（svg图标）

最新推荐文章于 2024-07-08 09:47:35 发布
最新推荐文章于 2024-07-08 09:47:35 发布
阅读量3.2k 收藏 12
点赞数 1
分类专栏： vue 文章标签： svg vue css vue使用svg iconfont如何使用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TUTsmile/article/details/104299376
版权
本文介绍了在Vue项目中如何使用Iconfont的SVG图标。首先，通过阿里巴巴的iconfont矢量图标库下载所需图标。接着，可以选择js文件方式进行集成，在项目中创建svg文件夹，将iconfont.js放进去，并新建icon.css文件进行样式定义。在main.js中全局引入icon.css，然后在vue组件中使用，通过`xlink:href`属性指定图标路径，实现图标显示。
摘要由CSDN通过智能技术生成

文章目录

此处说明一下，若想要知道svg的进阶用法，可参考这篇文章HTML5如何使用svg

1. 下载图标

点击链接 阿里巴巴的iconfont矢量图标库 进入阿里官网点击图标库
在这里插入图片描述
从图标库中，选中你想要的图标加入购物车
在这里插入图片描述
点击右上角的购物车，
在这里插入图片描述
根据个人使用需求，点击下载素材 或下载代码，,这两种方法对应的使用方法不同，后面会分为两个模块讲解
在这里插入图片描述

## 2.素材 使用方式（svg图标） 参考文章[Vue项目中使用svg图标](https://www.cnblogs.com/shenyf/p/10370949.h
最低0.47元/天 解锁文章
TUTsmile
关注
  • 1
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 不识别svg_vue配置svg 图标显示不出来
weixin_36012152的博客
02-11 1545
组件：props: {iconClass: {type: String,required: true},className: {type: String}},computed: {iconName() {return `#icon-${this.iconClass}`},svgClass() {if (this.className) {return 'svg-icon ' + this.class...
vue项目使用iconfont的最佳实践
08-12
在Vue.js项目中，有效地使用Iconfont是...通过以上步骤和最佳实践，可以在Vue项目中高效地使用Iconfont，提升项目的图标管理效率和用户体验。记得始终关注性能优化，避免无谓的资源加载，确保项目的轻量化和快速响应。
Vue项目中使用iconfont中的svg图标
H的博客
07-15 8156
iconfont 地址 同时使用下图svg，看下封装前后使用图标的差距 前 直接复制svg地址去使用，看着都头疼 后 一行搞定，真香 不废话，直接步奏 一. 安装依赖： npm install svg-sprite-loader --save-dev package.json看是否安装成功 二。build文件夹中的webpack.base.conf.js，...
vue项目中使用svg图标/插件svg-sprite-loader
最新发布
smouns_的博客
07-08 477
vue项目中使用svg图标,利用插件svg-sprite-loader
vue中引入.svg图标，使用iconfont图标库
weixin_48371382的博客
03-21 399
阿里巴巴的iconfont是一个很好的图标库，海量的素材可以快速满足开发人员日常对图标的诉求，我们采用symbol引用，官方介绍 创建SvgIcon组件 –components =>SvgIcon=>index.vue <template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg> </t
Vue使用iconfont的svg组件
xm_law的博客
05-29 1190
**路径：src/base/svg-icon/svg-icon.vue** <template> <svg class="icon svg-icon" aria-hidden="true" :style="ClassStyle"> <use :xlink:href="IconName"></use> ...
vue 导入 iconfont 中的 svg 图标
萝卜砸大坑
10-25 9万+
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。这种用法其 实是做了一个svg的集合，与另外两种相比具有如下特点： - 支持多色图标了，不再受单色限制。 - 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。 兼容性较差，支持 ie9+,及现代浏览器。 - 浏览器渲染svg的性能一般，还不如png。
vue项目引入Iconfont图标库的教程图解
10-17
点击“编辑”，设置图标使用时的前缀，这有助于避免与项目中其他CSS类冲突。配置完毕后，保存并下载到本地。 下载的文件通常包含一个`iconfont.css`文件和一个或多个`.ttf`或`.svg`格式的字体文件。将这些文件放入...
vue-svg-icons：中型文章“一个微小的Vue SVG图标组件-图标字体的替代品”的配套存储库
02-04
vue-svg-icons 项目设置 yarn install 编译和热重装以进行开发 yarn run serve 编译并最小化生产 yarn run build 运行测试 yarn run test 整理和修复文件 yarn run lint 自定义配置 请参阅。
vue使用自定义icon图标的方法
08-27
Vue 使用自定义 Icon 图标的方法 本文主要介绍了在 Vue 中使用自定义的 Icon 图标的方法。自定义 Icon 图标可以丰富 Vue 项目的视觉体验，为用户提供更加直观的交互方式。下面将详细介绍两种使用自定义 Icon 图标的...
Vue使用阿里图标库
12-16
3. **生成代码**：完成图标选择后，生成项目的在线链接或下载SVG图标文件。这里我们选择生成在线链接。 **四、引入图标库** 在Vue项目的`main.js`文件中引入阿里图标库的JavaScript和CSS链接。将之前生成的在线链接...
vue引入iconfont/引入svg原理
song854601134的博客
12-15 1469
最佳实践应该是用户点击切换某一类主题时,就按需加载那一类主题的样式,再注入到应用中渲染,这样可以极大的提升整体性能.最佳实践方式可以参考社区内关于多主题切换的文章.那一栏可以看到我们导进去的图标展现到了页面上,接下来使用鼠标单击导进去的图标将其标记为选中,再点击页面左下角的。为图标库,一步步实践图标引入,使用以及管理的整个流程.另外在文章的后半部分,还会介绍一下多主题变色模式下。新增的开发需求不可避免的会增加新的图标,而。,最终图标的颜色也会发生改变,这就为我们完成多主题的开发需求提供了可能.
VUE项目iconfont自定义SVG（非SVG文件）-_PUSDN
热门推荐
JaneYork的博客
11-25 14万+
简述 VUE项目iconfont自定义SVG,在线或者离线下载的阿里巴巴icon font.js；并非SVG文件； 前情提示 VUE2； 在线或者离线下载的阿里巴巴icon font.js；并非SVG文件； 文中使用的icon仅用于演示； 一说 同步更新最新版、完整版请移步PUSDN Powered By PUSDN - 平行宇宙软件开发者网www.pusdn.com ，转载请标明出处！ 部分截图、链接等因过期、更换域名、MD语法等可能不显示，可联系反馈（备注好博文地址），谢谢❤ 带有#号、删除线、不操
Vue引入iconfont图标，使用svg-icon
immocha的博客
07-03 1184
iconfont真是太好用了，之前一直使用font-class方式来引用，但是iconfont说Symbol 引用才是未来的主流，那么我们是一定要跟上主流的。 在vue中使用Symbol引入貌似比font-class要复杂一些，但只要一次配置好，之后就很方便了。
vue中引入.svg图标，使用iconfont图标库（SvgIcon组件使用）
weixin_30484247的博客
06-18 1961
原文链接：https://www.jianshu.com/p/7e65608ddc0a 作者：知足常乐晨链接：https://www.jianshu.com/p/7e65608ddc0a来源：简书 阿里巴巴的iconfont是一个很好的图标库，海量的素材可以快速满足开发人员日常对图标的诉求，我们采用symbol引用，官方介绍 创建SvgIcon组件 <template...
vue中使用svg-icon封装的组件来引用iconfont
泠泠似水
01-23 1576
转自 https://blog.csdn.net/shentibeitaokong/article/details/83039021
Vue项目中引用‘阿里巴巴字体图标库iconfont’
2401_84418948的博客
04-29 529
我们看到在上面两个平台设计图中的出现了大量的图标，在某种情况下，这种图标是需要我们自己去找的，不要喷我们的 ui 哈，主要是我喜欢麻烦 哈哈，如果ui提供我也是要求他为我们提供SVG格式的，至于为什么 下面会为大家讲解。在这里呢我们遇到这种图标可能会想到我们运用的框架中的字体图标，像element-ui、iview-ui中都提供了icon图标。
springboot项目父工程parent报错，Project build error: Non-resolvable parent POM for model:maven01:0.0.1-SNA
qq_42282321的博客
10-11 1734
springboot项目父工程parent报错，Project build error: Non-resolvable parent POM for model:maven01:0.0.1-SNAPSHOT 所遇到的问题 1.eclipse在创建springboot项目父工程时，导入依赖报错： 2.在maven配置无误的情况下，发现需要在maven的setting.xml里配置阿里云的mirror。 <mirror> <id>CN</id>
iconfont svg不显示_公众号文章SVG的使用小技巧及注意事项？
weixin_42505102的博客
12-10 1747
早上好~胖友们为了更好的帮助大家提升互动创意排版技巧今天三儿给大家带来公众号文章SVG样式的一些小技巧及注意事项1️⃣逐行显示，替换文字后，手机预览没有实现逐行显示是怎么回事？答：有可能是格式被破坏了，也有可能是更改文字的方式不对。逐行显示更改文字有3种方法：1. 直接在编辑器输入文字，使用秒刷功能2. 用专业版的【动画】功能3. 在代码里修改对应的文字2️⃣svg设置好点击查看内容后，为什么预览...
vue svg iconfont为空白
05-26
出现这种情况可能是由于以下原因： 1. 没有正确引入 SVG 图标文件：在 Vue 中使用 SVG 图标通常需要将 SVG 文件转换为组件。可以使用 `svg-to-vue-component` 或 `vue-svg-loader` 等插件来完成这个过程。 2. 字体文件或 SVG 文件未正确加载：如果字体文件或 SVG 文件未正确加载，可能会导致图标无法显示。可以通过检查网络请求或运行开发者工具来查看是否存在加载错误。 3. CSS 样式问题：在处理 SVG 图标时，CSS 样式可能会影响图标的显示。可以检查样式表中是否有与图标相关的样式，并尝试调整它们以解决问题。 4. 编码问题：在处理 SVG 图标时，编码问题可能会导致图标无法正确显示。可以确保文件编码正确，并尝试使用不同的编码方式。 希望这些信息可以帮助你解决问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值