Circum-Icons 开源项目常见问题解决方案

Circum-Icons 开源项目常见问题解决方案

Circum-Icons Circum is a open source icon library following Google Material Design principles. Every icon was made using a 24x24 grid. 项目地址: https://gitcode.com/gh_mirrors/ci/Circum-Icons

1. 项目基础介绍

Circum-Icons 是一个遵循 Google Material Design 原则的开源图标库。该项目提供了大量基于 24x24 网格制作的图标，旨在保持整个图标集的一致性，并确保每个图标具有相同的视觉重量。该库适用于多种前端框架，包括 React、Vue 和 Svelte。

主要编程语言：

• JavaScript
• TypeScript
• HTML/CSS

2. 新手使用时需特别注意的3个问题及解决步骤

问题一：如何安装 Circum-Icons？

问题描述： 新手在使用项目时不知道如何安装 Circum-Icons。

解决步骤：

1. 打开命令行工具。
2. 切换到项目目录。
3. 根据使用的框架执行以下命令之一：
   • 对于 React：npm i -D @klarr-agency/circum-icons-react
   • 对于 Vue：npm i -D @klarr-agency/circum-icons-vue
   • 对于 Svelte：npm i -D @klarr-agency/circum-icons-svelte
4. 安装完成后，按照文档中的示例使用图标。

问题二：如何在项目中使用 Circum-Icons？

问题描述： 新手不知道如何在项目中引入和使用 Circum-Icons。

解决步骤：

1. 根据你的框架，在代码中引入对应的图标组件：

   // React
   import CircumIcon from "@klarr-agency/circum-icons-react";
   // Vue
   import CircumIcon from "@klarr-agency/circum-icons-vue";
   // Svelte
   import CircumIcon from "@klarr-agency/circum-icons-svelte";
   

2. 在模板中使用图标组件，例如：

   <CircumIcon name="calendar" color="#000" size="48px" />
   

3. 根据需要调整颜色和大小。

问题三：如何获取可用的图标列表？

问题描述： 新手不知道如何查看和获取可用的图标列表。

解决步骤：

1. 访问 Circum-Icons 官方网站。
2. 网站上提供了所有可用图标的列表。
3. 可以直接在网站上构建图标数组，而无需来回复制每个图标的名称。

通过以上步骤，新手用户可以更容易地开始使用 Circum-Icons 项目，并有效地解决常见问题。

Circum-Icons Circum is a open source icon library following Google Material Design principles. Every icon was made using a 24x24 grid. 项目地址: https://gitcode.com/gh_mirrors/ci/Circum-Icons