跨端 SVG 图标需分场景：单色用 iconfont + ，多色/交互用 vu-icons 组件；H5 可内联 SVG 字符串，小程序不支持 加载 SVG 或 v-html 渲染。
直接用
这不是路径写错，是平台底层限制。微信、支付宝、字节等小程序环境完全不支持
- 别把 SVG 放
static/后用 -
require('@/static/x.svg')读出的是字符串，不是 DOM 节点，不能直接塞给 - 如果真要用
data:image/svg+xml;base64,...（注意：需 URL 编码 SVG 内容，否则中文或特殊字符会崩）
内联 SVG 字符串 + v-html 仅限 H5
H5 端可用 require 读取 SVG 文件内容，再用 v-html 渲染，好处是能动态改色、控制尺寸、绑定事件。但此法在所有小程序中被安全策略过滤—— 标签及其子元素会被直接丢弃，只剩空容器。
-
require路径必须是静态的，如require('@/static/logo.svg')；不能是require('@/' + name)（webpack 无法分析） - SVG 文件要精简：删掉
、注释、xmlns:xlink等冗余属性，只留结构 - H5 下宽高优先级：CSS 设置
width/height不生效，得靠viewBox+style="width: 24px; height: 24px"
真正跨端方案：字体图标（iconfont +
这是目前最稳定、体积可控、全平台兼容的方案。uni-app 官方
- 去
iconfont.cn创建项目 → 上传 SVG → 下载字体包 → 替换static/fonts/下对应文件 - 确保
uni.scss中已配置@font-face，且src路径指向正确（常见坑：url('./iconfont.woff2')要和实际文件位置一致） - 使用时：
type是 iconfont 项目里分配的 class 名（如icon-home） - 多色图标？字体图标天生单色，若设计稿强制要求多色，请走
vu-icons组件化 SVG 方案（见下一条）
需要多色/动态着色？用 vu-icons 组件化 SVG
传统字体图标无法实现一个图标内含红+蓝+渐变，而 vu-icons 把每个 SVG 封装为 Vue 组件，支持 color、size、class 等 props，小程序端通过 CSS Mask 实现着色，H5 端直改 fill/stroke，真正按需打包。
- 安装：
npm install vu-icons/uniapp，然后import { VuHome } from 'vu-icons/uniapp' - 模板中：
- 构建时自动 Tree Shaking：你只引入 3 个图标，打包体积就只增不到 1KB，对小程序主包限制极友好
- 注意：不要手动复制 SVG 字符串进
data或v-html，否则丢失组件能力，也失去类型检查
跨端 SVG 图标没有“一招鲜”，关键在分清场景：纯单色图标选 iconfont；需多色/强交互/类型安全，上 vu-icons；H5 专属动态需求才考虑内联字符串。最容易被忽略的是 SVG 文件本身的精简程度和 require 路径的静态性——这两点一错，连 H5 都跑不起来。
