查阅主题文档

hexo主题自带的社区图标总是不全的，以本人在用的flex-block主题为例，阅读主题的_config.yml配置说明，可以看到新增社区图标的方法。

如添加一个Google+图标，先在themes\flex-block\layout\_svg下添加social-google.svg。
然后编辑_config.yml配置文件，在social_icon下的icons添加google: [你的地址]即可。

我们进入themes\flex-block\layout\_svg看一下主题自带的图标。

一共只有5个，不够用，需要手工添加。

准备svg时遇到的坑

当时我是准备新增一个Steam图标，由于对svg格式文件不够了解，刚开始时误以为只是一种普通的文件格式，还找了一些所谓的在线jpg转svg的网站，按照教程重命名文件名、修改yml配置并部署后，发现新增的图标不会随着鼠标悬浮而变色，而是始终保持纯黑……

问题排查

使用文本编辑器打开主题自带的svg图标，和网站在线转换得来的svg图标对比。

发现自己做的svg图标实际上是个base64编码的图片，而标准的svg图标只用一段path就描绘了一个图形。

于是简单学习了一下svg知识，发现标准的svg就是矢量图，只用代码就能描述一个图形，而base64图片是无法跟随主题变色的！

SVG可对同一套图标进行换色处理，设计师只需要出一套图标资源，就可完成深色模式与浅色模式的图标适配。另外，对于开发人员来说，也可以有助于其去除适配的冗余代码，从而提升图标的管理和软件的运行效率。

所以问题就在于我们准备的svg图标并不是矢量图。

问题解决

寻找标准的svg矢量图，这里推荐一些专业网站：

https://www.svgviewer.dev/
https://www.iconfinder.com/
https://www.iconfont.cn/

这里特意提一点：svg矢量图自身可以是不带任何颜色的，以上图为例，下载的时候有些网站会问你要什么颜色，下载下来的矢量图会有个fill标签，我们需要将其删除才能实现跟随博客主题变色。

父元素设置red无效，因为<path>标签的最后默认设置了blue，此时该svg图片是蓝色的

<div style="color: red">
    <svg width="1em" height="1em" viewBox="0 0 1024 1024">
        <path d="M863.1 518.5H505.5V160.9c0-4.4-3.6-8-8..." fill="blue"/>
    </svg>
</div>

改为以下代码即可，svg图片红色生效：
1.svg标签中加入 fill="currentColor"
2.path标签中去掉 fill="blue"

<div style="color: red">
    <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">
        <path d="M863.1 518.5H505.5V160.9c0-4.4-3.6-8-8..." />
    </svg>
</div>

摘自csdn博客：https://blog.csdn.net/geekswg/article/details/120259520

我们的新图标终于能跟随鼠标悬浮或亮暗主题变色了~