SVG 转 CSS

将 Lucide 等 SVG 图标批量转换为微信小程序 WXSS 文件。支持 mask-image 模式（动态改色）和 background-image 模式（兼容降级），所有处理在浏览器本地完成。

拖拽 SVG 文件或文件夹到此处
或点击选择文件 · 支持批量处理
输出设置
.{前缀}-{图标名}
单位 rpx
支持动态改色
图标预览
0 个图标
拖拽 SVG 文件到上方区域开始
生成的 WXSS 代码 0 B 

      


      
      

        
        
          
          
          
        
      


      
      


    


    

      关联工具：字体转 CSS →  TTF/WOFF/WOFF2 字体文件转 Base64 @font-face，支持所有小程序平台
    


    
    

      
常见问题


      

        
什么是 mask-image 模式？为什么推荐使用它？

        
mask-image 是 CSS 的遮罩属性，将 SVG 作为遮罩层，通过 background-color 填充颜色。优势是可以通过 CSS color 属性（配合 background-color: currentColor）动态改变图标颜色，无需为每种颜色准备不同的图标文件。在微信小程序中，这意味着你可以用一行 style 切换图标颜色，极大简化了多色主题和图标的维护成本。大部分现代机型（iOS 10+、Android 8+）均支持。

      


      

        
background-image 模式什么时候该用？

        
当目标用户中有较多旧版安卓设备（如 Android 7.x 及以下）时，mask-image 可能存在兼容性问题。此时可切换到 background-image 模式，该模式兼容性极好，但不支持动态改色——图标的颜色会被编码到 data URI 中固定下来。如需改色，需要重新生成含不同 stroke 颜色的图标。

      


      

        
生成的 WXSS 文件如何在小程序中使用？

        
将下载的 .wxss 文件放入小程序项目目录，在 app.wxss 或页面级 wxss 中通过 @import './lucide-icons.wxss'; 引入。然后在 WXML 中使用：<view class="lucide lucide-heart" style="color: #ff4444;" />。注意需要使用两个类：公共基类（如 lucide）设置尺寸和遮罩属性，具体图标类（如 lucide-heart）设置图标形状。

      


      

        
可以处理非 Lucide 的 SVG 图标吗？

        
可以。本工具不限于 Lucide 图标，任何标准的 SVG 文件都可以处理。但需注意：mask-image 模式最适合描边风格（stroke-based）的线性图标。对于填充风格（fill-based）的实心图标，mask-image 的效果通常不理想——因为遮罩只关心形状的透明度，填充色会被忽略。如果图标含有 fill 属性，工具会给出警告提示。

      


      

        
图标数量过多时应该怎么处理？

        
微信小程序主包有 2MB 大小限制。建议主包只放高频使用的图标（建议不超过 80 个），其余图标按功能模块拆分到对应的分包中。本工具在生成超过 80 个图标时会给出提示。每次转换可以只选择部分图标（通过复选框筛选），批量导出多个 WXSS 文件分别用于不同场景。

      


      

        
数据安全吗？上传的 SVG 文件会被发送到服务器吗？

        
绝对不会。所有文件读取、SVG 解析、CSS 代码生成均在浏览器本地完成。拖入的 SVG 文件仅在内存中处理，不会被上传到任何服务器。即使完全断开网络连接，本工具也可正常使用。这是 GoGoGong 所有工具的核心设计原则。