• 请不要在回答技术问题时复制粘贴 AI 生成的内容
WangLiCha
V2EX  ›  程序员

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

  •  
  •   WangLiCha · Feb 22, 2022 · 2439 views
    This topic created in 1551 days ago, the information mentioned may be changed or developed.

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

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

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

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

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

    我们是以 iconfont 为主,无他,设计能力辣鸡,只能用现成资源
    Huelse
        4
    Huelse  
       Feb 22, 2022
    如果有产品出 svg 的话可用 fontcustom 打包

    https://github.com/FontCustom/fontcustom
    3dwelcome
        5
    3dwelcome  
       Feb 22, 2022
    @murmur 单纯的 base64 的图片复用很糟糕,远远不如 svg 。

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

    最好是写点图片复用框架,用 createObjectURL 来复用图标资源,或者注入到 css ,正文再引用。
    WangLiCha
        6
    WangLiCha  
    OP
       Feb 22, 2022
    @murmur 啊,是说 Sprite 其实已经有些过时了吗?但是我看到的说法是可以节省很多服务的请求次数?
    WangLiCha
        7
    WangLiCha  
    OP
       Feb 22, 2022
    @noe132 是用 Vue CLI 搭建的项目,看起来 vue-svg-loader 已经能完全满足要求了
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   1121 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 41ms · UTC 23:58 · PVG 07:58 · LAX 16:58 · JFK 19:58
    ♥ Do have faith in what you're doing.