Heroicons 开源项目使用教程

Heroicons 开源项目使用教程

heroiconsA set of free MIT-licensed high-quality SVG icons for UI development.项目地址:https://gitcode.com/gh_mirrors/he/heroicons

1. 项目的目录结构及介绍

Heroicons 是一个提供高质量 SVG 图标的开源项目，由 Tailwind Labs 维护。项目的目录结构如下：

heroicons/
├── LICENSE
├── README.md
├── package.json
├── src/
│   ├── 20/
│   │   ├── outline/
│   │   └── solid/
│   ├── 24/
│   │   ├── outline/
│   │   └── solid/
│   ├── 16/
│   │   └── solid/
│   └── index.js
├── dist/
│   ├── heroicons.js
│   └── heroicons.min.js
└── examples/
    ├── react/
    └── vue/

目录介绍

• LICENSE: 项目许可证文件。
• README.md: 项目说明文档。
• package.json: 项目依赖和脚本配置文件。
• src/: 源代码目录，包含不同尺寸和风格的图标。
  • 20/, 24/, 16/: 不同尺寸的图标目录。
    • outline/: 轮廓风格的图标。
    • solid/: 实心风格的图标。
  • index.js: 入口文件。
• dist/: 构建后的文件目录。
  • heroicons.js: 构建后的 JavaScript 文件。
  • heroicons.min.js: 构建后的压缩 JavaScript 文件。
• examples/: 示例代码目录，包含 React 和 Vue 的使用示例。

2. 项目的启动文件介绍

Heroicons 项目没有传统意义上的“启动文件”，因为它主要是一个图标库，而不是一个应用程序。不过，你可以通过以下方式使用这些图标：

在 HTML 中直接使用

你可以从 src/ 目录中复制所需的 SVG 图标，并将其内联到你的 HTML 中：

<svg class="size-6 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
  <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>

在 React 中使用

首先安装 @heroicons/react：

npm install @heroicons/react

然后导入所需的图标组件：

import { BeakerIcon } from '@heroicons/react/24/solid'

function MyComponent() {
  return (
    <div>
      <BeakerIcon className="size-6 text-blue-500" />
      <p>这是一个示例</p>
    </div>
  )
}

在 Vue 中使用

首先安装 @heroicons/vue：

npm install @heroicons/vue

然后导入所需的图标组件：

<template>
  <div>
    <BeakerIcon class="size-6 text-blue-500" />
    <p>这是一个示例</p>
  </div>
</template>

<script setup>
import { BeakerIcon } from '@heroicons/vue/24/solid'
</script>

3. 项目的配置文件介绍

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

package.json 文件内容

{
  "name": "heroicons",
  "version": "1.0.0",
  "description": "A set of free MIT-licensed high-quality SVG icons for UI development",
  "main": "dist/heroicons.js",
  "scripts": {
    "build": "rollup -c",
    "prepublishOnly": "npm run build"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/tailwindlabs/heroicons.git"
  },
  "

heroiconsA set of free MIT-licensed high-quality SVG icons for UI development.项目地址:https://gitcode.com/gh_mirrors/he/heroicons