感觉svg做icon很难用,不如字体icon,可能方式不对,记录一下╮(╯▽╰)╭
使用symbol 方便复用,position要是abolute,不然页面样式会乱;
<svg style="position: absolute; width: 0px; height: 0px; overflow: hidden;">
<symbol id="icon-caret-down1" fill="currentColor" viewBox="0 0 1024 1024"><path d="M756.6336 369.7664l-239.9232 239.9232a6.656 6.656 0 0 1-9.4208 0L267.3664 369.7664A6.656 6.656 0 0 1 272.0768 358.4h479.8464a6.656 6.656 0 0 1 4.7104 11.3664z"></path></symbol>
</svg>
fill=currentColor可以给use加了class后在css使用color设置颜色,不然只能使用fill设置颜色
use.nav-icon{
fill: #5E6064; //不设置fill=currentColor
}
use.nav-icon{
color: #5E6064; //设置fill=currentColor
}
HTML,svg要设置宽高,不然样式也会乱
<div class="svg-fa">
<svg width="1em" height="1em">
<use class="nav-icon" xlink:href="#icon-caret-down1"></use>
</svg>
</div>
还有个坑,用jq给use标签添加class,反正加不了,只能重写他的父级
$('.svg-fa').html(`<svg width="1em" height="1em">
<use class="nav-icon" xlink:href="#icon-caret-down1"></use>
</svg>`)