如何在頁面中使用svg圖標

1.svg圖標長啥樣

注意：圖標的寬高無所謂，使用時可以根據需求修改，fill后面是顏色的填充，可修改圖標顏色。

<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32">
　　<path d="M941.248 352L672 82.752A64 64 0 0 0 626.752 64H128a64 64 0 0 0-64 64v768a64 64 0 0 0 64 64h768
a64 64 0 0 0 64-64V397.248A64 64 0 0 0 941.248 352zM256 128h48v160H256V128z m112 0H512v160h-144V128zM256 896
v-192h512v192H256z m640 0h-64v-224a32 32 0 0 0-32-32H224a32 32 0 0 0-32 32v224H128V128h64v192a32 32 0 0 0 32 32
h320a32 32 0 0 0 32-32V128h50.752L896 397.248V896z" fill="#f06"/>
</svg>

2.使用svg圖標

2.1將下載好的.svg文件或者自己制作的.svg文件放到項目目錄下面。

2.2將 .svg 圖標作為背景圖使用：

#email {
    background: url(./img/email.svg) 12px 7px no-repeat;
    background-size: 20px 20px; // 在這設置圖標大小，不設置就是svg默認的寬高
}

3.為什么使用svg圖標？

這其實跟使用web字體圖標（比如：font-awsome、iconfont）差不多，只是一個項目中使用的圖標也就那幾個，沒有必要把所有的字體圖標庫文件全部加載下來（iconfont可以按照需要加載一定數量的字體圖標，但是無論如何都需要引入字體庫），二來還可以減少頁面的標簽數量。

如果項目中大量使用圖標，建議使用字體庫。畢竟單個使用圖標還是有些麻煩。