【亲测免费】 Feather 图标库使用教程

2026-01-17 09:07:10作者：卓炯娓

目录结构及介绍

Feather 图标库的目录结构相对简单，主要包含以下几个部分：

feather/
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── android-chrome-192x192.png
├── android-chrome-512x512.png
├── apple-touch-icon.png
├── build
│   ├── icons
│   │   ├── activity.js
│   │   ├── airplay.js
│   │   └── ...
│   ├── feather.js
│   └── feather.min.js
├── docs
│   ├── index.html
│   └── ...
├──favicon.ico
├── feather.js
├── feather.min.js
├── index.html
├── package.json
├── src
│   ├── icons
│   │   ├── activity.js
│   │   ├── airplay.js
│   │   └── ...
│   ├── feather.js
│   └── icons.json
└── test
    ├── index.html
    └── ...

CONTRIBUTING.md: 贡献指南。
LICENSE: 项目许可证。
README.md: 项目介绍和使用说明。
build: 编译后的文件，包含图标和主库文件。
docs: 文档文件，包含示例和说明。
src: 源代码文件，包含图标定义和主库文件。
test: 测试文件。

项目的启动文件介绍

Feather 图标库的启动文件主要是 index.html，它是一个示例页面，展示了如何使用 Feather 图标库。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Feather Icons</title>
  <link rel="stylesheet" href="https://unpkg.com/feather-icons/dist/feather.min.css">
</head>
<body>
  <i data-feather="activity"></i>
  <script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script>
  <script>
    feather.replace()
  </script>
</body>
</html>

在这个文件中，我们引入了 Feather 图标库的 CSS 和 JS 文件，并使用 <i> 标签来插入图标。通过调用 feather.replace() 方法，Feather 图标库会自动替换所有带有 data-feather 属性的元素为对应的图标。

项目的配置文件介绍

Feather 图标库的配置文件主要是 package.json，它包含了项目的依赖、脚本和其他元数据。

{
  "name": "feather",
  "version": "4.28.0",
  "description": "Simply beautiful open source icons",
  "main": "index.js",
  "scripts": {
    "build": "node build/build.js",
    "test": "node test/test.js",
    "start": "npm run build && npm run test"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/feathericons/feather.git"
  },
  "keywords": [
    "icons",
    "svg",
    "feather"
  ],
  "author": "Cole Bemis",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/feathericons/feather/issues"
  },
  "homepage": "https://feathericons.com",
  "devDependencies": {
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.10.0",
    "eslint-plugin-prettier": "^3.1.2",
    "prettier": "^1.19.1",
    "svgo": "^1.3.2"
  }
}

name: 项目名称。
version: 项目版本。
description: 项目描述。
main: 主入口文件。
scripts: 脚本命令，包括构建、测试和启动命令。

feather

Simply beautiful open-source icons

项目地址：https://gitcode.com/gh_mirrors/fe/feather

登录后查看全文