About inline svg and fontawesome

[jiangtj]

English

There was a discussion about FontAwesome before, theme-next/hexo-theme-next#505 ,and the main problems of FA is

1. Size, as the icons continue to increase, the size of FA will continue to increase, and most of the icons inside, we will not use
2. Fees, FA only provides some icons for free, and most icons need to be paid

So, converting webfont to inline svg is a good solution, it can make our theme:

1. More robust, whether our users use FA5 or FA6 (beta) or other webfonts, our inline svg remains unchanged
2. Reduce the size. Generally, our website only has a few icons, which usually only occupy about 10kb
3. Improved page rendering? refer to: https://github.blog/2016-02-22-delivering-octicons-with-svg/

However, inline svg also has shortcoming.

1. The compilation process needs to install related plug-ins, such as hexo-fontawesome, which means we need to use the theme through npm i, or add additional plugins after clone
2. More complex, basically no difference in use because we have the helper to generate the related SVG, but for dynamic loading, the related SVG needs to be generated in advance and downloaded and embedded into the HTML when dynamic loading is required

About webfont

@stevenjoezhang theme-next/hexo-theme-next#505 (comment)
hexo-fontawesome cannot handle dynamically loaded icons. We may need to develop a plugin based on this module: https://www.npmjs.com/package/webfont

I think inline SVG is better than WebFont. Webfont is more of a packaging tool that packs the ICONS together. It has the problems mentioned in the Github article and is more complex than inline SVG

Dynamic loading scheme

For example, generate the SVG icon we need in an 'SVG' folder as follows, and then download it and add it to the page via innerHtml

|--svg
|----icon1.svg
|----icon2.svg

More icon support

Recently, I wrote a svg generation plug-in: hexo-icon-svg-core, which can support multiple Icon library (I am a little disgusted with FA, so I want to replace it gradually)

The basic Api is:

icon(name, options)

If you have any ideas or improvements to the Api, you can bring them up as well

And this plugin is currently released under @jiangtj scope, so if NexT uses inline SVG, I will move this plugin to the NexT team, it's easy 😂

Question: Can you accept the following installation process?

//... same

Or you can clone the entire repository and install hexo-icon-svg-core:

$ cd hexo-site
$ git clone https://github.com/next-theme/hexo-theme-next themes/next
$ npm install hexo-icon-svg-core

中文

之前有过对于FontAwesome的讨论，theme-next/hexo-theme-next#505 ，FA目前主要的问题

1. 体积，随着图标的不断增加，FA的体积会一直增大，而里面的大部分图标，我们都是不会用到的
2. 收费，FA仅部分图标免费提供，而大部分图标都需要付费

所以，将webfont转换为内联svg是个不错的方案，他可以使我们的主题

1. 更加健壮，无论我们的用户使用FA5或者FA6(beta)又或者其他webfont，我们内联的svg是保持不变的
2. 减少体积，一般而言，我们的网站仅数个图标，一般而且只占10kb左右
3. 页面渲染改善？参考：https://github.blog/2016-02-22-delivering-octicons-with-svg/

但是，内联svg的存在不足

1. 编译过程需要安装相关插件，比如hexo-fontawesome，这意味着我们需要通过npm i的方式使用主题，或者在clone后额外添加相关插件
2. 更加复杂，基本使用没有差别，因为我们有helper生成相关svg，但对于动态加载，则需要提前生成相关svg，并在需要动态加载时，下载并嵌入到html内

关于webfont打包

@stevenjoezhang theme-next/hexo-theme-next#505 (comment)
hexo-fontawesome cannot handle dynamically loaded icons. We may need to develop a plugin based on this module: https://www.npmjs.com/package/webfont

我认为的内联svg比webfont更好，webfont更像是个打包工具，将用到的图标一起打包，他有github文章中提到的问题，同时相对于内联svg更加复杂

动态加载方案

例如，像下面那样在一个svg文件夹下生成我们需要的svg图标，然后需要时，下载并通过innerHtml添加到页面内

|--svg
|----icon1.svg
|----icon2.svg

更多图标支持

最近一段时间，我编写了一个svg生成插件：hexo-icon-svg-core，能很好的支持多个图标库（我对FA有点厌恶，所以想逐步替换）

基本的Api是:

icon(name, options)

如果你们对于Api有任何想法或者改进，也可以提出来

而且这个插件目前发布在@jiangtj范围下，所以如果NexT采用内联svg，我会将这个插件转移到NexT团队内，很方便转移:joy:

问题：你能接受以下的安装过程么？

//...

或者你可以clone整个仓库，同时添加 hexo-icon-svg-core 插件

$ cd hexo-site
$ git clone https://github.com/next-theme/hexo-theme-next themes/next
$ npm install hexo-icon-svg-core

[njzjz]

It's also available on jsdelivr, for example https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/svgs/solid/carrot.svg

[jiangtj]

是的，可以用img标签引入svg图片，我看到过相关的介绍再simple-icons，然而实际尝试后，img引入的方案无法修改svg颜色

所以对于我们需要同时适配亮暗两种模式的情况下，不能采用这种方案 😢

[njzjz]

用CSS？ https://stackoverflow.com/a/43916743

[jiangtj]

mask 可以修改颜色:+1:，但这种写法怪怪的，下面有个回答提到了filter，试了下也能实现，就是到时候颜色调整的时候，有点麻烦，但问题不大，等会我试试cdn

[ljcbaby]

希望能同时支持阿里巴巴矢量图标库，大部分国内社交媒体的图标都来自这里

[stevenjoezhang]

阿里巴巴矢量图标库的一个问题是图标来源比较杂，而且有重复的图标。需要设法做一些预处理，不然内联 svg 定位比较麻烦，难以保证图标的大小、位置是统一的。

[jiangtj]

阿里巴巴矢量图标库的一个问题是图标来源比较杂，而且有重复的图标。需要设法做一些预处理，不然内联 svg 定位比较麻烦，难以保证图标的大小、位置是统一的。

添加一个一样的class，我下载过一些阿里巴巴矢量图标库，里面好像都有class="icon"