开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >专栏 >svg替换原有伪类图标

svg替换原有伪类图标

作者头像

拿我格子衫来

发布于 2022-01-24 16:02:52

发布于 2022-01-24 16:02:52

6220

举报

文章被收录于专栏：TopFETopFE

将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");
}

参考链接技术细节详情 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

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

评论

登录后参与评论

0 条评论

热度

最新