Vue本地引用Iconfont(阿里巴巴图标库) SVG及普通图标

最新推荐文章于 2023-11-22 19:08:52 发布
最新推荐文章于 2023-11-22 19:08:52 发布
阅读量459 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/takeki_/article/details/130679393
版权

1.本地src目录下，新建xxx文件夹，自定义文件夹名称。目录结构如下：fontSy对应svg，fontUn对应普通图标。

 

2.在iconfont上下载对应zip(正常icon和SVG)，zip中包含的2个demo文件可删除，保留以下文件 

3.vue 中，main.js引入本地文件夹下的iconfont

import "@/icons/fontUn/iconfont.css"; //普通图标引入css

import "@/icons/fontSy/iconfont.js"; //svg引入js

将雨.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iconfont使用icon svg文件svg-symbol引用方法
細水、長流√的专栏
05-20 1530
【序】今天想为vue封装一个可以通过name就生成一个icon的组件，平时我们都是通过class来添加一个字体icon，但是看到ant-design-vue 中是使用的svg-icon的，并且配合阿里的iconfont库，使用起来非常方便，令我心动，让我们一起研究一下这个组件是怎么做到的。 问题一 【疑惑】：为什么要使用svg的图片格式？ 【解答】： 常用的两种icon的用法优缺点对比： font-class 兼容性良好，支持ie8+，及所有现代浏览器。 相比于unicode语意明确，书写更直观。
HTML-iconfont动态图标SVG效果--阿里巴巴图标矢量库
欢迎来到长风沛雨的博客
05-22 2616
跟pink老师学的svg描边动态图标
项目中引入阿里巴巴图标——iconfont图标的使用-svg格式
weixin_44867717的博客
04-08 6671
项目中引入阿里巴巴图标——iconfont图标的使用-svg格式 一、下载图标 1、先进入iconfont.cn页面 iconfont官网：https://www.iconfont.cn/ 2、登陆，并选择你要用的图标进行下载 3、点击下载，并选择弹框下面的色值和大小，点击svg下载，并进行重命名 1-浅灰正常图标 2-明蓝高亮图标 4、把下载的svg图标，放进本地项目里的某个文件夹，进行使用 二、使用图标 1、找到所需界面的html代码 2、在HTML中插入css文件 3、 在html里面插入一
使用svg引用iconfont
weixin_44298215的博客
07-31 680
iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具。4. 将上面的iconfont的js文件放在assets目录下。3. 选择Symbol，生成的js文件下载下来。iconfont-阿里巴巴矢量图标库。6. 封装SvgIcon组件。8. 使用SvgIcon组件。5. 在main.ts中引入。2. 在项目中生成在线代码。7. 将组件注册为全局组件。
vue引入iconfont/引入svg原理
song854601134的博客
12-15 1393
最佳实践应该是用户点击切换某一类主题时,就按需加载那一类主题的样式,再注入到应用中渲染,这样可以极大的提升整体性能.最佳实践方式可以参考社区内关于多主题切换的文章.那一栏可以看到我们导进去的图标展现到了页面上,接下来使用鼠标单击导进去的图标将其标记为选中,再点击页面左下角的。为图标库,一步步实践图标引入,使用以及管理的整个流程.另外在文章的后半部分,还会介绍一下多主题变色模式下。新增的开发需求不可避免的会增加新的图标,而。,最终图标的颜色也会发生改变,这就为我们完成多主题的开发需求提供了可能.
vue项目引入Iconfont图标库的教程图解
10-17
在Vue项目中，引入Iconfont图标库是一种常见的实践，特别是在Element UI等前端框架无法满足所有图标需求时。本文将详细讲解如何将Iconfont图标库整合到Vue项目中，以实现自定义图标的需求。 首先，你需要访问阿里...
在vue中使用阿里巴巴黑白图标和彩以图标.docx
01-13
阿里巴巴图标库提供了大量的图标资源，包括黑白小图标和彩色图标，这些图标可以很方便地集成到我们的 Vue 项目中。 一、阿里巴巴图标库简介 阿里巴巴图标库是一个开放的图标库，提供了大量的图标资源，包括黑白小...
vue中引用阿里字体图标的方法
08-28
Vue 中引用阿里字体图标的方法 在 Vue 项目中，使用阿里字体图标是一种非常常见的需求，但是很多开发者在引用阿里字体图标时，会遇到各种错误问题。今天，我们将详细介绍 Vue 中引用阿里字体图标的方法，并解决常见...
Vue中使用ElementUI使用第三方图标库iconfont的示例
10-17
主要介绍了Vue中使用ElementUI使用第三方图标库iconfont的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
web前端svg图标使用（关于阿里iconfont的symbol 引用）
Victoria_jones的博客
10-27 2021
symbol 引用是一种全新的使用方式，应该说是未来的主流，也是平台目前推荐的用法。本篇文章基于阿里的iconfont, 为您讲解web前端svg图标的使用。
Vue项目中本地引用Iconfont(阿里巴巴图标库)-svg图标样式使用 & element UI和ant design皆可
weixin_44867717的博客
09-20 7628
Vue项目中本地引用Iconfont(阿里巴巴图标库)-svg图标样式使用 & element UI和ant design皆可 下载图标 先进入iconfont.cn页面 iconfont官网：https://www.iconfont.cn/ 方法见上 使用一 准备工作 1、先注册，再登录、找到图标管理、我的项目 2、点紫色的这个创建自己的项目 新建项目界面如下 3、图中画蓝线的地方很重要 1）、FontClass/Symbol前缀这个很重要，一定不要写成：el-icon-***这样的形式
【vue3+vite】使用vite-plugin-svg-icons插件显示本地svg图标
houtengyang的博客
02-15 6400
【vue3+vite】使用vite-plugin-svg-icons插件显示本地svg图标
vue3 iconify 图标几种使用 并加载本地 svg 图标
最新发布
weixin_43512977的博客
11-22 2519
vue3 iconify 图标几种使用 并加载本地 svg 图标
使用 iconfont 中的 svg 图标
未思
05-19 1万+
最近在使用 Element-UI开发的时候发现其图标并不是够用，于是想着如何将 https://www.iconfont.cn/home/index 上面的图标导入进自己的项目中去。 网上的搜索结果基本都是传统的引入CSS的方法，并没有使用到SVG的特性，这里介绍使用SVG来引入图标，这中方式普适任意的组件库。 首先我们在iconfont上新键好自己的项目并下载至本地，打开之后其文件如下 我们只...
vue-element-admin项目中，icon、svg图标的使用
笑到世界都狼狈的博客
02-06 3959
在vue-element-admin中使用svg图片，下载svg图片，文件夹中查看svg图片
初学前端-记使用阿里图库SVG图标不显示的解决方法
zxc1207893278的博客
08-23 1528
使用VUE3+Element-Plus做来制作前端界面，做到左侧菜单栏时遇到了一个困难，添加的SVG图标始终不显示，位置存在，图标的信息也没有问题，但是就是一直显示不出来。的提示在Main.js中导入了inonfont.js文件后正常显示import './assets/fonts/iconfont/iconfont.js'的错误，但是不理解，不知从何下手。原来都是做上位机程序的第一次接触前端这种，感觉着实有些吃力，还有继续努力呀。其实在调试时浏览器中也报了。
iconfont使用简易教程 svg
jack_rose_me的博客
12-11 1034
因为自己的项目中需要使用图标，而本人不擅长前端。因此了解到阿里的iconfont矢量图标是一个不错的图标库。下文介绍最简易，通用的使用图标方式以便参考。 一、 寻找适用的图标 官方网址：http://www.iconfont.cn/找到需要的icon 以为例，添加入库。 二、 生成代码： 点击右上角购物车图标 点击下载代码，得到zip包，解压即可获得需要的文件。 ...
vue 导入 iconfont 中的 svg 图标
热门推荐
萝卜砸大坑
10-25 9万+
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。这种用法其 实是做了一个svg的集合，与另外两种相比具有如下特点： - 支持多色图标了，不再受单色限制。 - 通过一些技巧，支持像字体那样，通过font-size,color来调整样式。 兼容性较差，支持 ie9+,及现代浏览器。 - 浏览器渲染svg的性能一般，还不如png。
Vue项目中使用iconfont中的svg图标
H的博客
07-15 8130
iconfont 地址 同时使用下图svg，看下封装前后使用图标的差距 前 直接复制svg地址去使用，看着都头疼 后 一行搞定，真香 不废话，直接步奏 一. 安装依赖： npm install svg-sprite-loader --save-dev package.json看是否安装成功 二。build文件夹中的webpack.base.conf.js，...
vue项目中怎么引用阿里巴巴图标库
05-25
在 Vue 项目中引用阿里巴巴图标库，可以通过以下步骤来实现： 1. 安装 @ant-design/icons-vue 包 ``` npm install @ant-design/icons-vue --save ``` 2. 在 Vue 项目中使用 - 全局使用 在 main.js 中引入 @ant-design/icons-vue 包，并将其注册为全局组件： ``` import { createFromIconfontCN } from '@ant-design/icons-vue' const IconFont = createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_1234567_abcd1234.js' }) Vue.component('IconFont', IconFont) ``` 其中，`scriptUrl` 参数是需要替换成您自己的图标库链接。 然后，在组件中可以直接使用 `<IconFont type="icon-xxx" />` 的方式引入图标。 - 局部使用 在需要使用图标的组件中，直接引入 `@ant-design/icons-vue` 包，并创建一个 `IconFont` 对象： ``` import { createFromIconfontCN } from '@ant-design/icons-vue' const IconFont = createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_1234567_abcd1234.js' }) ``` 然后，在组件中可以直接使用 `<IconFont type="icon-xxx" />` 的方式引入图标。 以上就是在 Vue 项目中引用阿里巴巴图标库的方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值