开源项目教程：Pixelarticons 图标集

开源项目教程：Pixelarticons 图标集

pixelarticons 👾 Beautiful pixel icons. For the pixel vibes. 项目地址: https://gitcode.com/gh_mirrors/pi/pixelarticons

1. 项目介绍

Pixelarticons 是一个包含 486 个精心制作的像素艺术图标的开源项目。这些图标基于 24x24 网格设计，并使用 currentColor 填充。所有图标都是使用矩形单独制作的，以重现非抗锯齿的外观。为了保持图标的清晰度，推荐使用 24px、48px、72px 或 96px 的宽度和高度显示这些图标。

2. 项目快速启动

要使用 Pixelarticons，你可以通过以下几种方式：

通过包管理器安装

使用 npm 包管理器安装 Pixelarticons：

npm i pixelarticons@latest

直接在代码中使用

你可以直接在你的代码中引用图标：

<img src="https://unpkg.com/pixelarticons@1.8.1/svg/file.svg" />

生成 webfont

通过以下 npm 命令，你可以轻松地创建所有 webfont 文件，并将所有图标放入不同的 webfont 格式中，存放在 ./fonts/ 文件夹中：

npm run font

3. 应用案例和最佳实践

在网页中嵌入图标

将图标作为图片直接嵌入到 HTML 中，可以快速地在网页上展示图标。

<img src="path/to/your/icon.svg" alt="描述" />

在 CSS 中使用图标

你可以将图标转换为 webfont，然后在 CSS 中像使用字体一样使用图标。

.icon-file {
  font-family: 'Pixelarticons';
  content: '\e801';
}

确保在 HTML 中引入了相应的 webfont 文件。

4. 典型生态项目

目前，Pixelarticons 的生态项目包括：

• Figma 文件中的组件库
• 更新所有图标的 SVG 源代码
• 将所有矩形转换为 SVG 路径
• 提供公开的 Figma 文件图标库
• 添加新的填充图标集
• 添加新的 32x32 图标集

通过这些生态项目，Pixelarticons 可以更好地集成到不同的设计和开发工作流中，为开发者提供方便。

pixelarticons 👾 Beautiful pixel icons. For the pixel vibes. 项目地址: https://gitcode.com/gh_mirrors/pi/pixelarticons