Feather 图标库使用教程
featherSimply beautiful open-source icons项目地址:https://gitcode.com/gh_mirrors/fe/feather
目录结构及介绍
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: 脚本命令,包括构建、测试和启动命令。
featherSimply beautiful open-source icons项目地址:https://gitcode.com/gh_mirrors/fe/feather