专业编程基础技术教程

网站首页 > 基础教程 正文

GitHub精选 | Feather一组简单漂亮的开源图标

ccvgpt 2024-10-12 13:40:55 基础教程 10 ℃

《GitHub精选》是我们分享Github中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的是 Feather 是一组简单漂亮的开源图标，每个图标都设计在 24x24 网格上，强调简单性、一致性和灵活性。

快速开始

在浏览器中使用 Feather 开始原型设计，或者将以下代码片段复制并粘贴到一个空白html文件中。

GitHub精选 | Feather一组简单漂亮的开源图标

<!DOCTYPE html>
<html lang="en">
  <title></title>
  <script src="https://unpkg.com/feather-icons"></script>
  <body>

    <!-- example icon -->
    <i data-feather="circle"></i>

    <script>
      feather.replace()
    </script>
  </body>
</html>

使用

1.安装

注意：如果您打算将 Feather 与 CDN 一起使用，则可以跳过此安装步骤。

使用npm安装。

npm install feather-icons --save

或者只是复制feather.js或feather.min.js到您的项目目录中。feather.js和都不需要feather.min.js。

2. 包括

包括feather.js或feather.min.js带有<script>标签：

< script  src =" path/to/dist/feather.js " > </ script >

注意： feather.js和feather.min.js位于distnpm 包的目录中。

或者从 CDN 提供商加载脚本：

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

包含脚本后，feather将可用作全局变量。

3.使用

要在页面上使用图标，请将data-feather带有图标名称的属性添加到元素：

<i data-feather="circle"></i>

在feathericons.com 上查看完整的图标列表。

4.更换

调用feather.replace()方法：

<script>
  feather.replace()
</script>

所有具有data-feather属性的元素都将被替换为与其data-feather属性值相对应的 SVG 标记。有关更多信息，请参阅API 参考feather.replace()。

SVG 精灵

1.安装

注意：如果您打算将 Feather 与 CDN 一起使用，则可以跳过此安装步骤。

使用npm安装。

npm install feather-icons --save

或者只是复制feather-sprite.svg到您的项目目录中。

2. 使用

在您的页面上添加一个带有以下标记的图标：

<svg
  width="24"
  height="24"
  fill="none"
  stroke="currentColor"
  stroke-width="2"
  stroke-linecap="round"
  stroke-linejoin="round"
>
  <use href="path/to/feather-sprite.svg#circle"/>
</svg>

注意： circle在上面的例子中可以用任何有效的图标名称替换。在feathericons.com 上查看完整的图标名称列表。

但是，可以使用简单的 CSS 类来简化此标记，以避免在图标之间重复 SVG 属性：

.feather {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
<svg class="feather">
  <use href="path/to/dist/feather-sprite.svg#circle"/>
</svg>

更多：https://feathericons.com/

Tags：

猜你喜欢

最近发表
标签列表