← 返回 SVG 模块

SVG 图标系统

学习如何创建可复用的 SVG 图标库和 sprite 系统。

📦 图标库

点击图标复制代码

尺寸:

home

heart

star

user

settings

mail

bell

🎯 SVG Sprite 系统

使用 <symbol> 和 <use> 创建可复用的图标系统

              <!-- 1. 定义 sprite --> <svg style="display: none;"> <defs> <symbol id="icon-home"
                viewBox="0 0 24 24"> <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/> </symbol>
                </defs> </svg> <!-- 2. 使用图标 --> <svg class="icon"> <use
                href="#icon-home"/> </svg>
            

📝 内联 SVG 图标

直接在 HTML 中使用 SVG 代码，便于样式控制

              <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                stroke-width="2"> <circle cx="12" cy="12" r="10"/> <polyline points="12 6 12 12 16 14"/>
                </svg>
            

🎨 图标按钮示例

              <button class="btn"> <svg width="20" height="20"> <use href="#icon-heart"/>
                </svg> <span>收藏</span> </button>
            

💡 关键知识点

symbol: 定义可复用的图标模板，不会直接渲染
use: 引用 symbol 或其他 SVG 元素
viewBox: 定义 SVG 的坐标系统和可视区域
currentColor: 使图标颜色继承父元素的文本颜色
sprite 优势: 减少 HTTP 请求，便于缓存和维护
内联 SVG: 可以直接用 CSS 控制样式和动画
外部 SVG: 使用 <img> 或 background-image 引入