【js】web项目本地化引入ionicons字体图标

web项目使用字体图标

按照多数网站给的示例，引用Ionicons图标的方式

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

外链到ionicons官网，虽然有时图标加载滞后（慢），但是问题不明显……

间歇性不能显示

一段时间后，图标出现间歇性集体不能显示，报错为：https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js

链接超时……

判断是网速或github限制问题导致。

官方解决方案

就github限速问题的解决方案，使用镜像链接

<script src="
https://cdn.jsdelivr.net/npm/ionicons@7.4.0/dist/esm/ionicons.min.js
"></script>
<link href="
https://cdn.jsdelivr.net/npm/ionicons@7.4.0/dist/collection/components/icon/icon.min.css
" rel="stylesheet">

比unpkg的好一点，依然出现显示滞后，间歇性不能显示的问题。

还有浏览器跨域问题，时而有时而没有，阵发性出现。

试图改成本地化引用，在官网上下载资源包，只得到一堆svg

实现真正的本地化

传统web项目（不带node的），本地化引用需要打包后的dist

ionicons - npm

github上没有！

当然也可以拉下来自己打包

……

可以下载的资源在jsdelivr上

看这个网站的加载速度，就知道链接引用为啥间歇性不能显示了……

将dist中的ionicons文件夹考到自己的项目字体图标库fonts里，直接引用即可。

<script type="module" src="fonts/ionicons/ionicons.esm.js"></script>
<script nomodule src="fonts/ionicons/ionicons.js"></script>

总结

其实解决方案并不复杂，只是官网和大多数网上的解决方案都提供链接引用。还有就是nodejs搭建的脚手架项目，带有node_modules，可以npm安装自动构建 npm ionicon即可。

但是对于传统的web项目cdn模式引入各种组件库的项目不太适合，网上能找到的意见也比较少，找解决方案不容易。

这里详细记录下来，给需要的同学省点精力。