调用svg图片做图标

阿里矢量图标库:链接
引用javascript代码,将标签内“…”部分替换想要使用的path标签,上文链接中是图标库【复制svg可以获得标签】

!function(l){
	var e,d='...',t=(e=document.getElementsByTagName("script"))[e.length-1].getAttribute("data-injectcss");if(t&&!l.__iconfont__svg__cssinject__){l.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(e){console&&console.log(e)}}!function(e){if(document.addEventListener)if(~["complete","loaded","interactive"].indexOf(document.readyState))setTimeout(e,0);else{var t=function(){document.removeEventListener("DOMContentLoaded",t,!1),e()};document.addEventListener("DOMContentLoaded",t,!1)}else document.attachEvent&&(o=e,i=l.document,c=!1,(d=function(){try{i.documentElement.doScroll("left")}catch(e){return void setTimeout(d,50)}n()})(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,n())});function n(){c||(c=!0,o())}var o,i,c,d}(function(){var e,t,n,o,i,c;(e=document.createElement("div")).innerHTML=d,d=null,(t=e.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",n=t,(o=document.body).firstChild?(i=n,(c=o.firstChild).parentNode.insertBefore(i,c)):o.appendChild(n))})}(window);

如何使用:

<style> 
.icon {
   width: 23px;
   height: 23px;
   vertical-align: -5px;
   fill: currentColor;
   overflow: hidden;
 }
 </style>
 <svg class="icon" aria-hidden="true"><use xlink:href="#icon-store"></use></svg>

function前面加个!作用是什么?
告诉浏览器自动运行这个匿名函数
不仅可以用!,还可以用+, -, ~都可以。
解释器在解释一个语句时,如果以function开头,就会理解为函数声明。
而前面加一个!可以让解释器理解为函数表达式,这样就可以立即调用了。

你可能感兴趣的:(javascript)