svg替换原有伪类图标

将svg文件内容转义之后 加上前缀data:image/svg+xml;utf8, 来装载

.el-icon-arrow-down::before {
    content: url("data:image/svg+xml,%3Csvg t='1610605001506' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='9843' xmlns:xlink='http://www.w3.org/1999/xlink' width='16' height='16'%3E%3Cdefs%3E%3Cstyle type='text/css'%3E%3C/style%3E%3C/defs%3E%3Cpath d='M562.005333 512l-211.2-211.2 60.330667-60.330667L682.666667 512l-271.530667 271.530667-60.330667-60.330667z' p-id='9844' fill='%239DA1A7'%3E%3C/path%3E%3C/svg%3E");
}

  

 

  
1
  
2
  
3
 

参考链接 技术细节详情
https://www.zhangxinxu.com/wordpress/2018/08/css-svg-background-image-base64-encode/

svg转化工具1
https://www.zhangxinxu.com/sp/svg-text.php

svg转化工具2
https://tool.oschina.net/encode?type=4

文章来源: fizzz.blog.csdn.net，作者：拿我格子衫来，版权归原作者所有，如需转载，请联系作者。

原文链接：fizzz.blog.csdn.net/article/details/112610235