跨端 SVG 图标需分场景：单色用 iconfont + <uni-icon>，多色/交互用 vu-icons 组件；H5 可内联 SVG 字符串，小程序不支持 <image> 加载 SVG 或 v-html 渲染。
直接用 <image> 加载 SVG 文件必然失败
这不是路径写错，是平台底层限制。微信、支付宝、字节等小程序环境完全不支持 <image src="/static/icon.svg"> 渲染 svg，页面空白且无报错；h5 虽部分浏览器能显示，但行为不一致（比如 safari 拒绝加载本地 svg）。<image> 标签只认位图或 base64 数据 uri，不解析 svg 文本结构。
- 别把 SVG 放
static/后用<image>引——编译不报错，运行必白屏 -
require('@/static/x.svg')读出的是字符串，不是 DOM 节点，不能直接塞给<image> - 如果真要用
<image>，必须先转成 base64：data:image/svg+xml;base64,...（注意：需 URL 编码 SVG 内容，否则中文或特殊字符会崩）
内联 SVG 字符串 + v-html 仅限 H5
H5 端可用 require 读取 SVG 文件内容，再用 v-html 渲染，好处是能动态改色、控制尺寸、绑定事件。但此法在所有小程序中被安全策略过滤——<svg> 标签及其子元素会被直接丢弃，只剩空容器。
-
require路径必须是静态的，如require('@/static/logo.svg')；不能是require('@/' + name)（webpack 无法分析） - SVG 文件要精简：删掉
<?xml ?>、注释、xmlns:xlink等冗余属性，只留<svg>...</svg>结构 - H5 下宽高优先级：CSS 设置
width/height不生效，得靠viewBox+style="width: 24px; height: 24px"
真正跨端方案：字体图标（iconfont + <uni-icon>）
这是目前最稳定、体积可控、全平台兼容的方案。uni-app 官方 <uni-icon> 组件底层就是字体图标，无需额外 polyfill，小程序/H5/APP 均可原生渲染。
- 去
iconfont.cn创建项目 → 上传 SVG → 下载字体包 → 替换static/fonts/下对应文件 - 确保
uni.scss中已配置@font-face，且src路径指向正确（常见坑：url('./iconfont.woff2')要和实际文件位置一致） - 使用时：
<uni-icon type="xxx" size="24"></uni-icon>，其中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' - 模板中：
<VuHome color="red" size="24" />，TS 类型提示完整，IDE 可自动补全图标名 - 构建时自动 Tree Shaking：你只引入 3 个图标，打包体积就只增不到 1KB，对小程序主包限制极友好
- 注意：不要手动复制 SVG 字符串进
data或v-html，否则丢失组件能力，也失去类型检查
iconfont；需多色/强交互/类型安全，上 vu-icons；H5 专属动态需求才考虑内联字符串。最容易被忽略的是 SVG 文件本身的精简程度和 require 路径的静态性——这两点一错，连 H5 都跑不起来。 
