呜啦！日常碎碎念，偶尔掉落优质前端博文推荐、学习资源等
网页：https://tg.cosine.ren
本频道的搜索Bot 来辣 👉 @cosSearchBot
私聊直接发消息就可以搜索啦～
🔖tags
#优质博文 #资源推荐 #博客更新 #碎碎念 #项目更新 #手工 #书摘 #阮一峰的科技周刊 #新动态

图频：Cosine 🎨 Gallery @CosineGallery
猫片： @cosine_cat
#前端 #svg #icon #开源 #动画 #组件库 #动态图标
https://github.com/cyberalien/line-md

Line MD 是一个基于 SVG 的开源图标库，专为现代 Web 设计和开发优化。其特点包括轻量级、可缩放、可自定义，并支持多种前端框架（如 React、Vue 等）。该库提供了一组简洁、线性的图标，适用于 UI 设计。项目托管在 GitHub 上，允许开发者贡献新图标或修改现有图标，适用于需要高质量矢量图标的 Web 应用开发。

可以在 https://icon-sets.iconify.design/line-md/ 上浏览所有图标

Refs: 另一个动态图标库 https://icons.pqoqubbw.dev/ 是使用 motion + svg
GitHub
GitHub - cyberalien/line-md: Animated Material Icons. Icons are animated using SVG Animations Level 2 spec, no scripts.
GitHub - cyberalien/line-md: Animated Material Icons. Icons are animated using SVG Animations Level 2 spec, no scripts.
Animated Material Icons. Icons are animated using SVG Animations Level 2 spec, no scripts. - cyberalien/line-md
前端 svg icon 开源 动画 组件库 动态图标
《CSS 世界》font-face 中的src
@font-face {
font-family: ICON;
src: url('icon.eot') format('eot');
src: url('icon.eot?#iefix') format('embedded-opentype'),
url('icon.woff2') format("woff2") url('icon.woff') format("woff"),
url('icon.ttf') format("typetrue"), url('icon.svg#icon') format('svg');
font-weight: normal;
font-style: normal;
}
先解答一下字体格式的问题。上面这段 CSS 代码一共出现了 5 种字体格式，分别是.eot、.woff2、.woff、.ttf和.svg。
1. svg格式是为了兼容iOS 4.1及其之前的版本，考虑到现如今iOS的版本数已经翻了一番，所以svg格式的兼容代码大可舍弃。
2. eot格式是IE私有的。注意，目前所有版本的IE浏览器都支持eot格式，并不是只有IE6～IE8支持。只是，IE6～IE8仅支持eot这一种字体格式。
3. woff是web open font format几个词的首字母简写，是专门为Web 开发而设计的字体式，显然是优先使用的字体格式，其字体尺寸更小，加载更快。Android 4.4开始全面支持。
4. woff2是比woff尺寸更小的字体，小得非常明显。因此，Web 开发第一首选字体就是woff2，只是此字体目前仅Chrome和Firefox支持得比较好。
5. ttf 格式作为系统安装字体比较多，Web 开发也能用，就是尺寸大了点儿，优点在于老版本Android也支持。
综合上面的分析，我们可以得到如下的结论。
（1）svg格式果断舍弃。
（2）如果无须兼容IE8浏览器，eot格式果断舍弃。
（3）如果无须兼容Android 4.3之前版本手机，ttf格式果断舍弃。
说来说去还得是兼容，哎
iefix
 
 
Back to Top