# @dallay/astro-icon 中文文档

规范地址：https://npmcn.com/package/%40dallay/astro-icon/

版本：1\.3\.3
npm 元数据更新时间：2026-05-16T17:28:21.090Z
中文译文更新时间：2026-11-11T09:23:58.422Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40dallay/astro-icon
原文对照：https://npmcn.com/package/%40dallay/astro-icon/?lang=original
项目主页：https://github.com/dallay/astro-icon#readme
源码仓库：https://github.com/dallay/astro-icon

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：32.9 kB，17 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：3 个
- 首次发布：2026-05-16T16:46:28.083Z
- 最新版本发布：2026-05-16T17:28:20.640Z
- 近 30 天下载量：5686（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：2（近 12 个月 2 个）

## 中文简介

> **社区维护的叉子 [`astro-icon`](https://github.com/natemoo-re/astro-icon) 以 [内特·摩尔](https://github.com/natemoo-re),为Astro v6.x和Cloudflare工人兼容性更新.**

## 安装

```sh
npm install @dallay/astro-icon
```

也可以使用：`pnpm add @dallay/astro-icon`、`yarn add @dallay/astro-icon`、`bun add @dallay/astro-icon`

## README

# Astro 图标( 社区分叉)

> **社区维护的叉子 [`astro-icon`](https://github.com/natemoo-re/astro-icon) 以 [内特·摩尔](https://github.com/natemoo-re),为Astro v6.x和Cloudflare工人兼容性更新.**

[![npm version](https://img.shields.io/npm/v/@dallay/astro-icon?color=blue)](https://www.npmjs.com/package/@dallay/astro-icon) [![npm downloads](https://img.shields.io/npm/dm/@dallay/astro-icon?color=blue)](https://www.npmjs.com/package/@dallay/astro-icon) [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://npmcn.com/package/%40dallay/astro-icon/LICENSE) [![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-3178c6?logo=typescript&logoColor=white)](https://www.typescriptlang.org/) [![Astro v6](https://img.shields.io/badge/Astro-v6+-ff4d03?logo=astro)](https://astro.build/) [![Cloudflare Ready](https://img.shields.io/badge/Cloudflare-Ready-orange?logo=cloudflare)](https://workers.cloudflare.com/) [![GitHub issues](https://img.shields.io/github/issues/dallay/astro-icon)](https://github.com/dallay/astro-icon/issues) [![TypeScript](https://img.shields.io/badge/TypeScript-5.0+-3178c6?logo=typescript&logoColor=white)](https://www.typescriptlang.org/) [![Astro v6](https://img.shields.io/badge/Astro-v6+-ff4d03?logo=astro)](https://astro.build/) [![Cloudflare Ready](https://img.shields.io/badge/Cloudflare-Ready-orange?logo=cloudflare)](https://workers.cloudflare.com/) [![GitHub issues](https://img.shields.io/github/issues/dallay/astro-icon)](https://github.com/dallay/astro-icon/issues)

* * *

## 关于这个叉子

此套件 (`@dallay/astro-icon`是一个 **移植和扩展版本** 原件编号 [`astro-icon`](https://github.com/natemoo-re/astro-icon) 创建于 **[内特·摩尔(@natemoo-re)](https://github.com/natemoo-re)**。 。 。 .

原画 `astro-icon` 是一个很好的融合,它为Astro社区提供了良好的服务。 这个叉子的存在是为了满足随着Astro和无服务器部署目标的新版本而产生的特定相容性需要:

### 为什么是这个叉子?

-   **Astro v6.x 支持系统** —— Astro v6.x 打破更改的原始软件包尚未更新. 这个分叉包括必要的补丁,以确保与最新的Astro放出完全兼容.
-   **Cloudflare 适应性** - 在通过Cloudflare工人/Pages部署时 `@astrojs/cloudflare`,原始软件包会遇到与边缘环境中的Node.js API使用相關的运行时间问题. 这个叉子能解决这些问题.
-   **继续维持** - 为依赖下列条件的项目提供持续的维护和错误修正: `astro-icon` 在现代 Astro + Cloudflare 堆栈中.

### 承认

原始设计、建筑和图标系统的所有功劳都到 **[内特·摩尔](https://github.com/natemoo-re)** 和原始捐款者名单 [`astro-icon`](https://github.com/natemoo-re/astro-icon)这个叉子是因为他们的出色工作而得以实现的,并在同一条下释放 **MIT 许可证**。 。 。 .

如果上游项目在Astro v6的支持下恢复积极开发,我们建议重新迁移到原来的一揽子.

* * *

## 安装

选择您首选的软件包管理器 :

### 无

```sh
npm install @dallay/astro-icon
```

### 小时

```sh
pnpm add @dallay/astro-icon
```

### 线条

```sh
yarn add @dallay/astro-icon
```

### 包头

```sh
bun add @dallay/astro-icon
```

### 小时

```sh
pnpm add @dallay/astro-icon
```

### 线条

```sh
yarn add @dallay/astro-icon
```

### 包头

```sh
bun add @dallay/astro-icon
```

然后,加入你的整合 `astro.config.mjs`数字 :

```js
import { defineConfig } from "astro/config";
import icon from "@dallay/astro-icon";

export default defineConfig({
  integrations: [icon()],
});
```

## 使用量

Astro 图标已准备在零附加配置下使用. 包含的内容 `Icon` 组件允许您内入 `svg`直接输入您的 HTML.

### 本地图标

默认情况下, Astro 图标支持自定义本地 `svg` 图标。 他们被优化了 [`svgo`](https://github.com/svg/svgo) 自动,没有额外的构建步骤。 见 ["漂亮的好SVG图标系统"](https://css-tricks.com/pretty-good-svg-icon-system/#just-include-the-icons-inline) 从CSS特技.

1.  在其中创建目录 `src/` 名称 `icons/`。 。 。 .
2.  作为个人添加每个想要的图标 `.svg` 文件为 `src/icons/`。 。 。 .
3.  使用 `name` 道具 (英语).

```astro
---
import { Icon } from '@dallay/astro-icon/components';
---

<!-- Loads the SVG in `/src/icons/filename.svg` -->
<Icon name="filename" />
```

### 图标

Astro 图标也支持 [图标](https://iconify.design/) 图标.

1.  查找在 [图标集网站](https://icon-sets.iconify.design/)
2.  安装软件包(例如:. `npm i -D @iconify-json/mdi`(中文(简体) )
3.  使用 `name` 道具(例如:. `mdi:account`(中文(简体) )

```astro
---
import { Icon } from '@dallay/astro-icon/components'
---

<!-- Automatically fetches and inlines Material Design Icon's "account" SVG -->
<Icon name="mdi:account" />
```

### 道具

这个 `Icon` 组件允许这些自定义属性 :

```ts
interface Props extends HTMLAttributes<"svg"> {
  /**
   * References a specific Icon
   */
  name: string;
  "is:inline"?: boolean;
  title?: string;
  desc?: string;
  size?: number | string;
  width?: number | string;
  height?: number | string;
}
```

这个 `Icon` 也接受任何全局 HTML 属性并 `aria` 属性。 将转交已移交的 `<svg>` 键.

### 样式

设计你的图标是直截了当的。 任何风格都可以针对 `[data-icon]` 属性选择器。 如果您想要瞄准特定图标, 您可以使用 `[data-icon="filename"]`。 。 。 .

```astro
---
import { Icon } from '@dallay/astro-icon/components';
---

<style lang="css">
    [data-icon] {
        color: blue;
        /* OR */
        fill: blue;
    }
    [data-icon="annotation"] {
        color: red;
        /* OR */
        fill: red;
    }
</style>

<Icon name="adjustment" /> <!-- will be blue -->
<Icon name="annotation" /> <!-- will be red -->

<!-- Example using Tailwind to apply color -->
<Icon name="annotation" class="text-red-500" /> <!-- will be red-500 -->
```

### 使用框架

Astro 图标可以与其他框架一起使用 [`slot` 元素](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot)。 您可以在此阅读更多关于如何在 Astro 中使用 Slots 的信息 : [向框架组成部分传递儿童](https://docs.astro.build/en/core-concepts/framework-components/#passing-children-to-framework-components)。 。 。 .

## 配置

### 构建一体化

Astro 图标集成有它自己的控制选项 `Icon` 组件。 更改这些在 `astro.config.mjs` 文件是您工程的集成设置所在.

#### 配置。 包括

用户使用 `output: 'server'` 或者说 `output: 'hybrid'`,强烈建议配置服务器捆绑中应当包含的确切图标。 默认情况下,集中的每一个图标都会被捆绑入服务器JavaScript.

要过滤应包含的确切图标,请在 `include` 对象。 只有这些图标才会被捆绑.

**`astro.config.mjs`**

```js
import { defineConfig } from "astro/config";
import icon from "@dallay/astro-icon";

export default defineConfig({
  // ...
  integrations: [
    icon({
      include: {
        mdi: ["*"], // (Default) Loads entire Material Design Icon set
        mdi: ["account"], // Loads only Material Design Icon's "account" SVG
      },
    }),
  ],
});
```

#### 配置. icon Dir

如果您想要使用不同的自定义 svg 图标目录而不是默认 `src/icons/`,指定使用 `config.iconDir`

```js
import { defineConfig } from "astro/config";
import icon from "@dallay/astro-icon";

export default defineConfig({
  // ...
  integrations: [
    icon({
      iconDir: "src/assets/icons",
    }),
  ],
});
```

#### 配置. svgo 选项

如果你想自定义行为 `.svg` 优化,您可以配置 `svgo` 选项,而不是使用默认值。 更多信息,请访问 [`svgo` 此处选项](https://github.com/svg/svgo#configuration)。 。 。 .

```js
import { defineConfig } from "astro/config";
import icon from "@dallay/astro-icon";

export default defineConfig({
  // ...
  integrations: [
    icon({
      svgoOptions: {
        multipass: true,
        plugins: [
          {
            name: "preset-default",
            params: {
              overrides: {
                // customize default plugin options
                inlineStyles: {
                  onlyMatchedOnce: false,
                },

                // or disable plugins
                removeDoctype: false,
              },
            },
          },
        ],
      },
    }),
  ],
});
```

## 从 `astro-icon`

如果您正在使用原始数据 `astro-icon` 软件包,迁移到这个分叉是直接的:

1.  **交换软件包**数字 :
    
    ```sh
    npm uninstall astro-icon
    npm install @dallay/astro-icon
    ```
    
2.  **更新导入**数字 :
    
    ```diff
    - import icon from "astro-icon";
    + import icon from "@dallay/astro-icon";
    
    - import { Icon } from 'astro-icon/components';
    + import { Icon } from '@dallay/astro-icon/components';
    ```
    
3.  **就这样!** ——API表面完全相容. 不需要更改配置 .
    

## 捐款

欢迎你提交一个问题或公关!

## 贷项

-   **[内特·摩尔(@natemoo-re)](https://github.com/natemoo-re)** - 原作者: [`astro-icon`](https://github.com/natemoo-re/astro-icon)
-   **[杰森・米勒](https://github.com/developit)** ——此工程所适应的 HTML 解析器

## 许可证

麻省理工学院——见 [自由主义](https://npmcn.com/package/%40dallay/astro-icon/LICENSE) 详细情况.

原作"2021"内特·摩尔. 分叉修改 2026道莱.

## 常见问题

### @dallay/astro-icon 是什么？

社区维护的叉子 astro-icon 以 内特·摩尔,为Astro v6\.x和Cloudflare工人兼容性更新\.

### 如何安装 @dallay/astro-icon？

在项目目录运行 npm install @dallay/astro-icon，或使用 pnpm add / yarn add / bun add。

### @dallay/astro-icon 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @dallay/astro-icon 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @dallay/astro-icon 可以商用吗？

@dallay/astro-icon 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @dallay/astro-icon 的下载量有多少？

根据 npm 官方下载统计，@dallay/astro-icon 在 2026/10/11 – 2026/11/09 这 30 天内被下载 5,686 次，日均约 190 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @dallay/astro-icon 还在维护吗？

最新版本 1\.3\.3 发布于 2026/05/17（5 个月前）；至今共发布 2 个版本，其中过去 12 个月发布了 2 个；首次发布于 2026/05/17。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。