维护项目中的iconfont图标库


维护一个项目,发现项目中图标使用了阿里巴巴矢量图标库 iconfont 

现在需要添加一些图标到图标库中

 

我们首先需要导入项目图标库到 iconfont 的项目中

 

1. 提取 svg 资源

1)找到图标 SVG 信息

打开图标库的 symbol 模式

浏览器的 F12 大法,查看图标的 svg 信息

注意:

元素定位,这样,是不行的

需要定位到内部

2)创建 SVG 图标

新建一个 文本文件,名称为 svgid,去掉开头的 icon-,后缀名改为 svg

如果不修改的话,上传 iconfont 后,样式回多出来一个icon-,iconfont 项目样式回自动的添加 icon-[id]

复制第一步得到的 svg 标签到文本文件

2. 上传SVG到 iconfont 的项目中

1) 新建一个空项目

2)点击上传图标至项目

点击上传 svg 文件

选择我们新建的 svg 文件

左边选择一个图标,可以修改图标的名称,

 

点击保留颜色并提交,我们就得到了图标库

 

现在可以维护图标库,然后重新下载替换项目的图标库文件就行了

版权声明:本文为YES开发框架网发布内容,转载请附上原文出处连接
YES开发框架
上一篇:API接口安全设计方案
下一篇:【推荐】Razor文件编译 ASP.NET Core
评论列表

发表评论

评论内容
昵称:
关联文章

维护项目iconfont图标
模块维护
Devexpress使用自带图标图标
YESWEB使用iconfont图标
EFCore官方扩展
UI图标下载
git仓库子模块(submodule)项目实战应用
在Winform项目和Web API.NetCore项目使用Serilog 来记录日志信息
SourceGenerator应用: .Net多进程开发 - Juxtapose
.NET Core 项目windows server部署
WPF开发随笔收录-自定义图标控件
.NET大型项目开发必备(5)--Web服务/WebApi负载均衡
winform项目提醒框扩展类 MessageBoxHelper
Electron调用C#类dll
【荐】开源Winform控件:花木兰控件
.NET大型项目开发必备(4)--数据库读写分离
.NET大型项目开发必备(10)--图片裁剪、缩放、与加水印
vue3重新封装element-plus组件按钮组件el-button
在Vue 3项目使用TypeScript和Pinia进行持久化状态管理和初始化操作
TinyMCE 支持图标列表

联系我们
联系电话:15090125178(微信同号)
电子邮箱:garson_zhang@163.com
站长微信二维码
微信二维码