如何优雅的在 iconify,使用设计的图标,并维护相关 icon 库

33 天前
 wjk1011

大家写前端时是如何跟设计对接 icon ?

iconfont 、iconpark (这个带个 beta )、iconbox 。

502 次点击
所在节点    问与答
1 条回复
bojackhorseman
33 天前
现在在用 iconpark ,产品用的 figma ,图标是可以导出为 svg 的。

1. 导出后的单色图标用 vscode 打开,使用 svg 编辑器将 stroke 透明度去掉,并将颜色修改为 currentColor ,后面就可以通过 css 设置 color 来控制图标的颜色

2. 在 iconpark 上创建一个项目,上传图标,可以设置不同分组

3. 更新代码,使用 web component 链接,更新到 index.html 里


4. 下载类型文件,这里生成的 ts 是给 react 用的,摘取 name 字段作为类型



5. 组件调用
<iconpark-icon name="arrow" />

每次需要更新图标就重复以上步骤

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/1066422

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX