非常流行的开源图标库，完全开源免费，可商用——ikonate

介绍

---

---

Github

https://github.com/mikolajdobrucki/ikonate

---

是什么让Ikonate与众不同？

• 完全可定制化

我们很难找到一个完美的图标集，尤其是免费图标集。Ikonate图标可以轻松调整，以满足正在设计的品牌或产品的需求

---

---

• 无障碍友好型

Ikonate是第一个这样的图标集，旨在完全可访问*并帮助使产品更具包容性，对每个人都有用。

---

---

• 性能优越，易用性高

在互联网上找到的大多数图标都充斥着大量无用的代码，只会降低你的代码性能。Ikonate图标开箱即用。

---

---

• 完全开源免费

Ikonate完全开源，你可以到Github获取最原始的代码，完全可商用

---

---

安装使用

可以手动克隆仓库到项目中安装

git clone https://github.com/eucalyptuss/ikonate.git

---

也可以使用npm管理

npm install ikonatenpm installnpm run build

---

• DEMO和文件结构

原始SVG，所有图标都可以在./ikonate/icons中作为原始的，没有样式的SVG使用

演示文件：

演示分别在./ikonate/build/inline/index.html和./ikonate/build/sprite/index.html下提供。如果直接在浏览器中打开精灵演示，则可能无法正确显示图标。要正确打开，需要在服务器环境下打开，建议演示可以使用live-server。

---

用法

• 作为img标签或者background-image使用

要将图标生成为单独的样式svg文件，可访问官方网站。使用图标作为<img>或background-image，则无法使用CSS自定义它们。

• 内联SVG

要将图标用作内联svg，请使用适合您项目的技术从./ikonate/icons导入所需的图标。使用此方法，可以稍后使用CSS自定义图标。

• SVG sprite

也可以自定义CSS

• 定制

要使用CSS自定义图标，需要将图标用作内联SVG或SVG sprite。可以使用以下CSS参数来自定义图标：

1. width
2. height
3. stroke
4. stroke-width
5. stroke-linecap
6. stroke-linejoin

---

例如：

---

width: 24px;height: 24px;stroke: currentColor;stroke-width: 2;stroke-linecap: round;stroke-linejoin: round;

---

在线图标生成

在官方网站上可在线导出SVG

---

---

你可以根据自己的需要设置边框、尺寸、颜色等，如下：

---

---

总结

ikonate是一个及其优秀的开源图标库，你可以用在任何时候任何地方，完全免费，送给不爱写代码的设计师！如果你有这样的需求，不妨尝试一下！