布尔玛 | 图标

介绍

布尔玛是一套基于 SVG 的开源图标库，拥有 600 多个简洁、易用、可定制的图标，包含了多种主题色彩和样式。可用于 Web 应用、移动应用等平台，支持单色或多色配置，可以方便地集成到你的项目中。

特点

• SVG 格式，可缩放无限大，保证图标质量；
• 多个主题，提供了不同颜色的图标，以适应不同项目场景；
• 简单易用，可直接复制 SVG 代码或使用 npm 安装；
• 可自定义，通过修改颜色和大小，调整至应用需求；
• 开源，面向全球开发者，支持任何使用场景。

安装

在项目中引入布尔玛图标库的最简便方式是直接使用 <script> 标签引入：

<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>

或者使用 npm 安装：

npm install feather-icons

安装完成后，在 js 文件中导入使用：

import feather from 'feather-icons';

使用

• 使用 <i> 或 <svg> 标签，添加图标类名即可引入对应图标。

<!-- 使用i标签方式 -->
<i class="feather-users"></i>

<!-- 使用svg标签方式 -->
<svg class="feather">
  <use xlink:href="feather-sprite.svg#user"></use>
</svg>

• 可以自定义图标颜色和大小。

<i class="feather-home" style="color: red; font-size: 24px"></i>

教程

在 布尔玛官网 上提供了丰富的教程，包括了常见问题解答、自定义主题、GitHub 仓库等，供开发者参考。

例子

以下为几个简单的例子供参考：

用户头像（单色）

<i class="feather-user" style="font-size: 50px;"></i>

邮寄信封（多色）

<i class="feather-mail" style="color: #ef5350; font-size: 50px;"></i>

钥匙（单色 + 自定义样式）

<i class="feather-key" style="color: #6d4c41; background-color: #ffe0b2; border-radius: 50%; padding: 20px;"></i>

结论

布尔玛图标库提供了良好的图标集，方便开发者在项目中应用，支持自定义颜色和大小，满足了不同项目场景需求。同时它也是一款优秀的开源项目，社区活跃，值得推荐。