svg入坑小记

感觉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>`)