SVG 与 是构建轻量、可复用、易维护前端图标库的核心机制，通过 定义带 viewBox 和 的不可见模板，再用 实例化，支持样式控制、无障碍访问和按需渲染。

SVG 与 是构建轻量、可复用、易维护的前端图标库的核心机制。它不依赖外部文件或 JS 框架，支持样式控制、无障碍访问和按需渲染，是现代 SVG 图标方案的推荐实践。

用 定义图标，统一管理

是一个不可见的模板容器，必须配合 id 使用。它通常放在文档顶部（如 内、 开头或单独的 区域），不直接渲染，只供后续引用。

每个 应设置 viewBox（定义坐标系）和语义化 title（提升可访问性）：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

  
    
    
  
  
    
    
    
  

用 实例化图标，灵活复用

通过 xlink:href（HTML5 中可简写为 href）指向 的 id，实现零重复绘制。它支持内联样式、CSS 类、尺寸控制和伪元素交互。

• 基础用法：
• 设置大小：在 上加 width/height，或用 CSS 控制 font-size + width: 1em
• 覆盖颜色：对 设置 fill，前提是原始 未写死 fill 属性（推荐用 fill="currentColor"）
• 响应式：结合 em 单位或 CSS 自定义属性，例如 style="--icon-size: 1.5em"，再在 中用 width="var(--icon-size)"

优化建议与常见注意点

实际项目中，几个细节决定体验和可维护性：

• 避免内联 style 在 中：把颜色、描边等交给 或 CSS 控制，保持符号纯净
• 统一 viewBox 尺寸：如全部设为 "0 0 24 24"，方便 CSS 统一缩放，也利于设计系统对齐
• 服务端或构建时注入：不要手写大量 ；可用 Webpack 插件（如 svg-sprite-loader）或 Vite 插件自动聚合 SVG 文件
• 兼容性处理：IE 不支持 href 简写，需保留 xlink:href（或用 polyfill）；也可通过 document.createElementNS 动态补全

与字体图标、雪碧图的本质区别

相比传统方案：
– 字体图标依赖字体渲染，无法精确控制路径、不支持渐变/滤镜、语义弱；
– 雪碧图需计算背景偏移、放大失真、无法单色换肤；
– + 是原生矢量，支持所有 SVG 特性，图标即代码，可被 JS 操作、被屏幕阅读器识别、被搜索引擎索引。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！