直接打开symbol.html 图标展示不出来

[baidongying]

有两个问题：

1. 需要启动服务器
2. symbol.svg 文件和html 文件需要放到同一个域名下，否则use 引用有跨域问题

解决：可以生成对应的symbol.js 文件，将symbol.svg 文件的svg append 放到html里面，更改use xlink:href 直接写对应的id，就可以展示出来了 js 文件大概结构： var symbols = '<svg style="width:0; height:0; visibility:hidden;position:absolute;z-index:-1"><symbol viewBox="0 0 24 24" id="heart"><path fill="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z"></path></symbol></svg>'; document.body.insertAdjacentHTML("afterBegin",symbols) 需要去掉svg 标签里面的换行，不然会报错

[jaywcjlove]

@baidongying 是的，如果你需要本地方便预览，可以使用 sgo 工具。symbol 的方式就是不需要 使用任何 js 玩耍的 纯 HTML 方案