Feather

Feather 是什么？

Feather 是一个简洁优美的开源图标集合。每个图标都设计在 24x24 的网格上，强调简洁、一致性和灵活性。

npm install feather-icons

快速开始

使用这个 CodePen 模板开始在浏览器中使用 Feather 进行原型设计。

或者将以下代码片段复制并粘贴到一个空白的 html 文件中。

<!DOCTYPE html>
<html lang="zh">
  <title></title>
  <script src="https://unpkg.com/feather-icons"></script>
  <body>
    <!-- 示例图标 -->
    <i data-feather="circle"></i>

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

使用方法

Feather 的核心是一个 SVG 文件集合。这意味着你可以像使用 SVG 一样使用 Feather 图标（例如 img、background-image、inline、object、embed、iframe）。这里有一篇有用的文章详细介绍了 SVG 在网络上的多种使用方式：SVG on the Web – Implementation Options

以下是使用 Feather 的其他方法。

客户端 JavaScript

1. 安装

[!注意] 如果你打算使用 CDN 来使用 Feather，可以跳过这个安装步骤。

使用 npm 安装。

npm install feather-icons --save

或者直接将 feather.js 或 feather.min.js 复制到你的项目目录中。你不需要同时使用 feather.js 和 feather.min.js。

2. 引入

使用 <script> 标签引入 feather.js 或 feather.min.js：

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

[!注意] > feather.js 和 feather.min.js 位于 npm 包的 dist 目录中。

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

<!-- 选择其中一个 -->
<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 标记。有关 feather.replace() 的更多信息，请参阅 API 参考。

Node

1. 安装

使用 npm 安装：

npm install feather-icons --save

2. 引入

const feather = require('feather-icons');

3. 使用

feather.icons.x;
// {
//    name: 'x',
//    contents: '<line ... /><line ... />`,
//    tags: ['cancel', 'close', 'delete', 'remove'],
//    attrs: {
//      class: 'feather feather-x',
//      xmlns: 'http://www.w3.org/2000/svg',
//      width: 24,
//      height: 24,
//      viewBox: '0 0 24 24',
//      fill: 'none',
//      stroke: 'currentColor',
//      'stroke-width': 2,
//      'stroke-linecap': 'round',
//      'stroke-linejoin': 'round',
//    },
//    toSvg: [Function],
// }

feather.icons.x.toSvg();
// <svg class="feather feather-x" ...><line ... /><line ... /></svg>

feather.icons.x.toSvg({ class: 'foo bar', 'stroke-width': 1, color: 'red' });
// <svg class="feather feather-x foo bar" stroke-width="1" color="red" ...><line ... /><line ... /></svg>

有关 feather 对象的可用属性和方法的更多信息，请参阅 API 参考。

SVG 精灵图

1. 安装

[!注意] 如果你打算使用 CDN 来使用 Feather，可以跳过这个安装步骤。

使用 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>

Figma

Feather 可作为 Figma 组件库使用。要使用这些组件，请登录你的 Figma 账户并将文件复制到你的草稿中。

API 参考

`feather.icons`

包含每个图标数据的对象。

用法

feather.icons.x;
// {
//    name: 'x',
//    contents: '<line ... /><line ... />',
//    tags: ['cancel', 'close', 'delete', 'remove'],
//    attrs: {
//      class: 'feather feather-x',
//      xmlns: 'http://www.w3.org/2000/svg',
//      width: 24,
//      height: 24,
//      viewBox: '0 0 24 24',
//      fill: 'none',
//      stroke: 'currentColor',
//      'stroke-width': 2,
//      'stroke-linecap': 'round',
//      'stroke-linejoin': 'round',
//    },
//    toSvg: [Function],
// }

feather.icons.x.toString();
// '<line ... /><line ... />'

[!注意] > 上面示例中的 x 可以替换为任何有效的图标名称。完整的图标名称列表请参见 feathericons.com。多词名称的图标（如 arrow-right）不能使用点notation访问（如 feather.icons.x）。请改用方括号notation（如 feather.icons['arrow-right']）。

查看源码

`feather.icons[name].toSvg([attrs])`

返回一个 SVG 字符串。

参数

名称	类型	描述
`attrs` (可选的)	Object	`attrs` 对象中的键值对会被映射到 `<svg>` 标签上的 HTML 属性（例如 `{ foo: 'bar' }` 映射为 `foo="bar"`）。`<svg>` 标签上的所有默认属性都可以通过 `attrs` 对象覆盖。

[!注意] 你可能会发现这些 SVG 属性对于操作图标很有帮助：

color

width

height

stroke-width

stroke-linecap

stroke-linejoin

用法

feather.icons.circle.toSvg();
// '<svg class="feather feather-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'

feather.icons.circle.toSvg({ 'stroke-width': 1 });
// '<svg class="feather feather-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'

feather.icons.circle.toSvg({ class: 'foo bar' });
// '<svg class="feather feather-circle foo bar" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'

查看源码

`feather.replace([attrs])`

将所有具有 data-feather 属性的元素替换为与元素的 data-feather 属性值相对应的 SVG 标记。

参数

名称	类型	描述
`attrs` (可选的)	Object	`attrs` 对象中的键值对会被映射到 `<svg>` 标签上的 HTML 属性（例如 `{ foo: 'bar' }` 映射为 `foo="bar"`）。`<svg>` 标签上的所有默认属性都可以通过 `attrs` 对象覆盖。

用法

[!重要] > feather.replace() 只在浏览器环境中工作。

简单用法：

<i data-feather="circle"></i>
<!--
<i> 将被替换为:
<svg class="feather feather-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>
-->

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

你可以给 feather.replace() 传递一个 attrs 对象：

<i data-feather="circle"></i>
<!--
<i> 将被替换为:
<svg class="feather feather-circle foo bar" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>
-->

<script>
  feather.replace({ class: 'foo bar', 'stroke-width': 1 });
</script>

占位元素（即 <i>）上的所有属性都将被复制到 <svg> 标签上:

<i data-feather="circle" id="my-circle" class="foo bar" stroke-width="1"></i>
<!--
<i> 将被替换为:
<svg id="my-circle" class="feather feather-circle foo bar" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>
-->

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

查看源码

`feather.toSvg(name, [attrs])` (已废弃)

[!警告] > feather.toSvg() 已被废弃。请使用 feather.icons[name].toSvg() 代替。

返回一个SVG字符串。

参数

名称	类型	描述
`name`	字符串	图标名称
`attrs` (可选)	对象	`attrs` 对象中的键值对将被映射到 `<svg>` 标签上的HTML属性（例如 `{ foo: 'bar' }` 映射为 `foo="bar"`）。`<svg>` 标签上的所有默认属性都可以通过 `attrs` 对象覆盖。

用法

feather.toSvg('circle');
// '<svg class="feather feather-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'

feather.toSvg('circle', { 'stroke-width': 1 });
// '<svg class="feather feather-circle" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'

feather.toSvg('circle', { class: 'foo bar' });
// '<svg class="feather feather-circle foo bar" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>'

查看源码