V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
wjk1011
V2EX  ›  问与答

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

  •  
  •   wjk1011 · Aug 20, 2024 · 938 views
    This topic created in 615 days ago, the information mentioned may be changed or developed.

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

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

    1 replies    2024-08-20 14:45:47 +08:00
    dumbass
        1
    dumbass  
       Aug 20, 2024   ❤️ 1
    现在在用 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" />

    每次需要更新图标就重复以上步骤
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   4234 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 31ms · UTC 00:55 · PVG 08:55 · LAX 17:55 · JFK 20:55
    ♥ Do have faith in what you're doing.