如何在页面中使用svg图标

Posted 2021-11-26 codebook

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可以按照需要加载一定数量的字体图标，但是无论如何都需要引入字体库），二来还可以减少页面的标签数量。

如果项目中大量使用图标，建议使用字体库。毕竟单个使用图标还是有些麻烦。