一、背景与问题
1. 背景
在前端的项目开发过程中，我们经常使用到 字体图标库（iconfont），以 ant dezign 为例。
如果在遇到图标库不存在的图标时，我们往往采用自定义图标的方式：
- 引入自定义的svg图，作为component
- 但是并不是任何类型的svg都可继承父类的颜色与字体大小，需要设置svg的属性：width=“1em” height=“1em” fill=“currentColor”
2. 问题
-
当我们有此类需求时：导航的图标可配置，并且可以进行全栈换肤。
-
实现方式：
为了实现全栈换肤，我们需要采用svg的形式来展示图标，
但是图标是我们上传到阿里云上后，把http链接 拿到后台配置出来的，于是
这个方式将失效。
二、解决方案（svg链接如何嵌入HTML，呈现出来）
1. 菜鸟教程提供了三种方案：（❌）
这种方式虽然可以展示出svg图片，却无法选中html元素 更改样式，达到换肤的效果。因为embed、object、iframe都是样式隔离的。
2. 直接使用<img src=xxx />标签，但这种方式也会面临上述问题。（❌）
3. 使用 element.innerHtml = 请求到的svg string，但此方法有XSS攻击安全隐患。（❌）
4. 使用background-color + mask-image。（✅）
mask-image: CSS属性用于设置元素上遮罩层的图像。
使用方式：
当我们为有颜色的背景图上加上遮罩层图像，即可展示出类似的效果，曲线救国用在这里再为合适不过了。
其实mask-image还有许多用处： CSS遮罩CSS3 mask/masks详细介绍，大家感兴趣可以去康康
三、写在最后
这个问题当时探索了好久才找到一个可实用的解决方案，记下来为大家塌塌坑。如果你有更好的解决方式，欢迎评论！
开发中总能遇到各种奇奇怪怪的问题，欢迎大家共享出自己遇到的奇葩问题，我们一起探讨。
