V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
WangLiCha
V2EX  ›  程序员

项目组零基础转做前端,求助前端项目目前流行的图标管理方案

  •  
  •   WangLiCha · 2022-02-22 12:49:20 +08:00 · 1935 次点击
    这是一个创建于 1030 天前的主题,其中的信息可能已经有所发展或是发生改变。

    简单介绍下背景,我们项目组之前是做 WPF 开发的,现在有需求要把之前的项目做成一个简化版的前端版本。

    其他技术方面调研和开展都还好,但是目前比较纠结于图标管理的方案。过去我们工作的流程是 UI 组的同事把图标做好放到蓝湖上,我们从蓝湖拿到 SVG 格式的图标,然后将其转换成 WPF 的 XAML 资源嵌入到程序集里。所以我们需要一个在尽量维持 UI 组工作方式不变的情况下找到一个适用于前端的方案。

    目前我了解到的比较流行的方案就是 CSS Sprite 和图标字体。有哪些工具是比较适合制作这些资源的?我知道阿里有一个 iconfont 能把平台上的图标打包成字体,字节有一个 IconPark 还能导出成 Vue 组件(但是不清楚具体实现原理,而且貌似使用自己的图标只能上传到字节的服务器上?),但是可选的方案太多了,我们也缺乏经验判断不出哪个更好。

    所以求助各位有经验的 V 友指导一下了

    7 条回复    2022-02-22 16:00:25 +08:00
    noe132
        1
    noe132  
       2022-02-22 12:56:38 +08:00   ❤️ 2
    gouflv
        2
    gouflv  
       2022-02-22 13:04:15 +08:00 via iPhone
    前端没有兼容问题就 svg ,可以直接引用,或者像 antd 那样的 UI 库,用组件抱包起来 统一维护
    murmur
        3
    murmur  
       2022-02-22 13:32:20 +08:00
    webpack 可以把小的图片打成 base64 ,现在不需要那么纠结,宽带时代还在问雪碧图这些除了面试没什么意义

    我们是以 iconfont 为主,无他,设计能力辣鸡,只能用现成资源
    Huelse
        4
    Huelse  
       2022-02-22 13:45:15 +08:00
    如果有产品出 svg 的话可用 fontcustom 打包

    https://github.com/FontCustom/fontcustom
    3dwelcome
        5
    3dwelcome  
       2022-02-22 14:03:53 +08:00
    @murmur 单纯的 base64 的图片复用很糟糕,远远不如 svg 。

    图片再小,你也不可能每个相同的小图标,都注入一大段 base64 代码。

    最好是写点图片复用框架,用 createObjectURL 来复用图标资源,或者注入到 css ,正文再引用。
    WangLiCha
        6
    WangLiCha  
    OP
       2022-02-22 15:58:13 +08:00
    @murmur 啊,是说 Sprite 其实已经有些过时了吗?但是我看到的说法是可以节省很多服务的请求次数?
    WangLiCha
        7
    WangLiCha  
    OP
       2022-02-22 16:00:25 +08:00
    @noe132 是用 Vue CLI 搭建的项目,看起来 vue-svg-loader 已经能完全满足要求了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2778 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 15:07 · PVG 23:07 · LAX 07:07 · JFK 10:07
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.