Astro 图标( 社区分叉)
社区维护的叉子
astro-icon以 内特·摩尔,为Astro v6.x和Cloudflare工人兼容性更新.
关于这个叉子
此套件 (@dallay/astro-icon是一个 移植和扩展版本 原件编号 astro-icon 创建于 内特·摩尔(@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 堆栈中.
承认
原始设计、建筑和图标系统的所有功劳都到 内特·摩尔 和原始捐款者名单 astro-icon这个叉子是因为他们的出色工作而得以实现的,并在同一条下释放 MIT 许可证。 。 。 .
如果上游项目在Astro v6的支持下恢复积极开发,我们建议重新迁移到原来的一揽子.
安装
选择您首选的软件包管理器 :
无
npm install @dallay/astro-icon
小时
pnpm add @dallay/astro-icon
线条
yarn add @dallay/astro-icon
包头
bun add @dallay/astro-icon
小时
pnpm add @dallay/astro-icon
线条
yarn add @dallay/astro-icon
包头
bun add @dallay/astro-icon
然后,加入你的整合 astro.config.mjs数字 :
import { defineConfig } from "astro/config";
import icon from "@dallay/astro-icon";
export default defineConfig({
integrations: [icon()],
});
使用量
Astro 图标已准备在零附加配置下使用. 包含的内容 Icon 组件允许您内入 svg直接输入您的 HTML.
本地图标
默认情况下, Astro 图标支持自定义本地 svg 图标。 他们被优化了 svgo 自动,没有额外的构建步骤。 见 "漂亮的好SVG图标系统" 从CSS特技.
- 在其中创建目录
src/名称icons/。 。 。 . - 作为个人添加每个想要的图标
.svg文件为src/icons/。 。 。 . - 使用
name道具 (英语).
---
import { Icon } from '@dallay/astro-icon/components';
---
<!-- Loads the SVG in `/src/icons/filename.svg` -->
<Icon name="filename" />
图标
Astro 图标也支持 图标 图标.
- 查找在 图标集网站
- 安装软件包(例如:.
npm i -D @iconify-json/mdi(中文(简体) ) - 使用
name道具(例如:.mdi:account(中文(简体) )
---
import { Icon } from '@dallay/astro-icon/components'
---
<!-- Automatically fetches and inlines Material Design Icon's "account" SVG -->
<Icon name="mdi:account" />
道具
这个 Icon 组件允许这些自定义属性 :
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"]。 。 。 .
---
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 元素。 您可以在此阅读更多关于如何在 Astro 中使用 Slots 的信息 : 向框架组成部分传递儿童。 。 。 .
配置
构建一体化
Astro 图标集成有它自己的控制选项 Icon 组件。 更改这些在 astro.config.mjs 文件是您工程的集成设置所在.
配置。 包括
用户使用 output: 'server' 或者说 output: 'hybrid',强烈建议配置服务器捆绑中应当包含的确切图标。 默认情况下,集中的每一个图标都会被捆绑入服务器JavaScript.
要过滤应包含的确切图标,请在 include 对象。 只有这些图标才会被捆绑.
astro.config.mjs
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
import { defineConfig } from "astro/config";
import icon from "@dallay/astro-icon";
export default defineConfig({
// ...
integrations: [
icon({
iconDir: "src/assets/icons",
}),
],
});
配置. svgo 选项
如果你想自定义行为 .svg 优化,您可以配置 svgo 选项,而不是使用默认值。 更多信息,请访问 svgo 此处选项。 。 。 .
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 软件包,迁移到这个分叉是直接的:
-
交换软件包数字 :
npm uninstall astro-icon npm install @dallay/astro-icon -
更新导入数字 :
- import icon from "astro-icon"; + import icon from "@dallay/astro-icon"; - import { Icon } from 'astro-icon/components'; + import { Icon } from '@dallay/astro-icon/components'; -
就这样! ——API表面完全相容. 不需要更改配置 .
捐款
欢迎你提交一个问题或公关!
贷项
- 内特·摩尔(@natemoo-re) - 原作者:
astro-icon - 杰森・米勒 ——此工程所适应的 HTML 解析器
许可证
麻省理工学院——见 自由主义 详细情况.
原作"2021"内特·摩尔. 分叉修改 2026道莱.