如何使用阿里巴巴矢量图标库,创建自己的svg图标库（iview ts）

最新推荐文章于 2024-04-18 02:00:20 发布
最新推荐文章于 2024-04-18 02:00:20 发布
阅读量2.2k 收藏 1
点赞数 1
文章标签： vue.js typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/juvialoxer/article/details/104991886
版权
本文介绍了如何在阿里矢量图标库创建个人项目，下载图标后将其整合到基于vue.js和typescript的项目中。通过在main.ts中配置，并在需要的地方引入图标，实现便捷地使用自定义SVG图标。
摘要由CSDN通过智能技术生成

一.在阿里矢量图标库创建自己的项目
在这里插入图片描述点击上传图标至项目
在这里插入图片描述
在这里插入图片描述
点击下载至本地
在这里插入图片描述
就会获得对应的ico

最低0.47元/天 解锁文章
juvialoxer
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Quasar 前端框架之图标的使用
zz001357的博客
07-04 4690
一、前言 最近在用一个听说好评如潮的（不懂是不是真的，反正能实现项目需求）前端框架做响应式开发，目的是为了用一套代码适配移动端、web端，于是找到了Quasar，用Quasar-cli 开发，碰到一个这样的问题：如何使用图标？ 二、解决 步骤一，目前Quasar支持：Material Icons、Font Awesome、Ionicons、MDIandIcoMoon。也就是说，你只能在这几个网站里使用里面的图标，如果要自己的,emmmmmm.....在网站上传图标吧，或者,我也不会 步骤二，在...
一文搞定阿里巴巴矢量图库
m0_47186697的博客
03-20 1390
一文搞定 阿里巴巴矢量图
阿里巴巴矢量图标库的使用步骤
12-18 3440
一，首先我们要先注册一个账号 二，进入网站主页：资源管理——>我的项目——>点击加号新建项目 三，在搜索框中输入想要的图标名称，例如：购物车，找到喜欢的购物车图标，点击添加入库，然后添加到项目。 四，在我的项目中，选择保存图标的项目，然后下载到本地。 五，解压下载的文件夹 首先给解压的文件夹重命名为(为了方便)：font 里面有一个demo_index.html：这个网页是教我们如何使用这些图标 我们使用Font Class的形式 六，把整个font文件夹剪切，粘贴到我们的项目中的s
Iconfont该如何使用，多种组件模块化详解（png，icon，svg）
最新发布
炑焽的博客
04-18 1712
Iconfont是一个功能强大、资源丰富的在线图标库，通过掌握其使用方法和多种组件的模块化应用技巧，我们可以更好地利用图标进行设计和管理，提升作品的质量和用户体验。接下来，本文将详细介绍Iconfont的使用方法以及各种图标格式的模块化应用技巧。
vue+vite项目引入quasar后使用quasar其他图标库
http____的博客
07-30 815
vue + vite构建项目后，引入quasar，并使用quasar的图标库
自定义svg-icon组件实现
m0_68935893的博客
10-21 89
【代码】自定义svg-icon组件实现。
iview 的table 加矢量图icon的方式
Quiet_123的博客
11-09 2883
iview+table+icon实现table中某一列添加图标。自己项目里遇到的问题，记录一下。 注意：table里的render函数的使用。 第一步：render函数 { title: '站名', key: 'name', // align:"c...
copy_alibaba:一键复制阿里巴巴矢量图标库SVG图标，无需下载
05-11
一键复制阿里巴巴矢量图标库SVG图标，无需下载 阿里巴巴矢量图标库提供了大量的图标可供选择，当然，在尊重版权的前提下拿来放在项目上。 苦于每次想要使用图标库 的图标都需要下载图标===拉到文件夹====写文件路径/...
如何在项目中使用阿里巴巴矢量图标
03-27
阿里巴巴矢量图标库，通常称为Iconfont，提供了丰富的图标资源，支持多种格式，包括SVG、Webfont、CSS等。下面我们将详细探讨如何在项目中集成和使用这些图标。 首先，我们需要了解`iconfont.css`和`iconfont.js`这...
阿里矢量图标库
04-26
阿里矢量图标库是阿里巴巴设计团队推出的一款强大的在线图标资源平台，它集合了大量的高质量、可缩放的矢量图标，广泛应用于网页设计、移动应用、软件开发等多个领域。这款图标库以其丰富的图标种类、易用的搜索功能...
icongenie：用于为Quasar应用程序生成所有图标和启动画面的CLI工具
02-04
注意！ 移至Quasar的核心仓库： : Quasar Framework图标精灵 一个Quasar工具，用于生成所有Quasar App的图标和启动画面 什么是Icon Genie 该节点模块从原始的1240x1240正方形图标输出一组SQUARE图标，web图标，pwa图标和电子图标，以及iOS，Windows应用商店和MacOS图标，这些图标既保持透明度，又使资产最小化。 它还将为Cordova /电容器甚至是缩小的svg创建启动屏幕。 它可以跨平台工作，以生成Electron应用程序使用的那些讨厌的.icns和.ico文件，对于后者，某些浏览器和webscrapers（favi
拟态化可自定义主页，图标来自阿里巴巴矢量图标库
02-01
总结来说，这个项目展示了如何使用HTML和CSS技术创建一个拟态化的自定义主页，并结合阿里巴巴矢量图标库来提升界面美观度和用户体验。开发者需要掌握HTML的结构化标记，CSS的样式控制，以及如何有效地利用矢量图标...
阿里巴巴图标库网站编写的流星雨特效
11-11
阿里巴巴图标库是一个非常知名的在线资源平台，为开发者和设计师提供了大量的图标资源，这些图标通常以SVG、PNG等格式提供，便于在各种项目中使用。在这个特定的案例中，"流星雨特效"是一种视觉效果，可能被用作网站...
Vue项目引入使用svg
Jioho的博客
03-28 1975
Vue项目引入使用svg 随着项目页面的增多，UI 库的 svg 图标渐渐不够用了。于是 UI 给了一大堆的 svg 新的图标，一个个引入显然不实际，于是把 svg 放到指定文件夹，然后批量引入，通过组件去使用这一堆 svg。 项目结构 |--build | `-- webpack.base.js `--src `-- assets `-- icons |-- index.js `-- svg `--
vue项目引入svg图标（完整步骤）
热门推荐
weixin_44293690的博客
08-12 2万+
vue项目引入svg图标（完整步骤）
Vue项目ts踩坑之iview
Liu
01-04 680
vue项目中使用ts引入iview不能正常显示样式 按官网提示导入iview（版本3.1.0） index.ts import iView from 'iview'; import 'iview/dist/styles/iview.css'; Vue.use(iView); 编译可以通过，如图： js项目中这样的配置显示正常，如图： ts项目中的样式没有起效，如图： ...
vue-cli+ts+iview单多页面的配置实践
糖糖小菜鸟前端er
06-17 2421
简介 实现效果：常见的后台管理系统的 demo。地址：https://github.com/MaTonna/vue-cli-ts-ivew 项目启动 安装依赖 npm i 项目启动 npm run serve http://127.0.0.1:3000/page1/index1/contentCenter2 是单页面的类似后台管理的页面，同时这个系统配置了多页面的 http://127.0....
阿里巴巴矢量图标库vue
08-20
阿里巴巴矢量图标库（Iconfont）可以在Vue项目中使用。首先，您需要创建自己的项目图标库。您可以访问https://www.iconfont.cn/并手动创建自己的项目图标库。选中您需要的图标并添加到您的项目中。完成后，点击上方...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值