需要关闭

NetoIcons 和 netoIconsRN 库是 SVG 反应组件图标的集合,可以驱动该库中的经验 在BigBinary制造出的产品.

目录

• 安装
• 使用量
• 如何运作
• 出版说明

安装

网络 :

yarn add @bigbinary/neeto-icons

原生反应 :

yarn add @bigbinary/neeto-icons-rn

发展指示

检查 前端软件包开发指南 分步执行 指示开发前端软件包.

向库中添加新图标

1. 添加 SVG 文件 - 将新图标的 SVG 文件放在适当的文件夹中 source 目录. 例如:

   • icons/ 用于普通图标
   • logos/ 产品标识
   • typefaceLogos/ 产品型号标识
   • appIcons/ 用于应用程序图标
   • misc/ 用于杂项图标
   • elements/ 要素

2. 适当命名文件 - 为文件名使用 PascalCase( 例如 ), NewIcon.svg) (中文(简体) ).

3. 校验图标 - 运行 yarn start 命令以校验新图标的 React 组件 :

使用量

网络 :

import { Clock } from "@bigbinary/neeto-icons";

原生反应 :

import { Clock } from "@bigbinary/neeto-icons-rn";

反应文件中的任何地方

<Clock color="#1e1e20" size={24} />

反应原生导入

每个类别都可用一桶:

import { NeetoSite } from "@bigbinary/neeto-icons-rn/app-icons";
import { Keyboard } from "@bigbinary/neeto-icons-rn/elements";
import { Clock } from "@bigbinary/neeto-icons-rn/icons";
import { Neeto } from "@bigbinary/neeto-icons-rn/logos";
import { Windows } from "@bigbinary/neeto-icons-rn/misc";
import { Neeto as NeetoTypeface } from "@bigbinary/neeto-icons-rn/typeface-logos";

每个图标也可以单独导入,作为默认导出,这样捆绑器只能拉入所使用的内容:

import Clock from "@bigbinary/neeto-icons-rn/icons/Clock";
import Neeto from "@bigbinary/neeto-icons-rn/logos/Neeto";

每个类别也可通过一个单一的名称空格入口到达:

import { Icons, Logos, Misc } from "@bigbinary/neeto-icons-rn/namespaces";

<Icons.Clock size={24} />;

道具类型单独导出 :

import type { IconProps } from "@bigbinary/neeto-icons-rn/types";

地铁配置

这些子路径通过 exports 软件包的字段, Metro 默认只从 React 获得荣誉 本地人 0.79 前进。 在较早的版本中,字段被忽略了,上面的导入无法解决,所以允许在 metro.config.js数字 :

module.exports = {
  resolver: {
    unstable_enablePackageExports: true,
  },
};

产品标志

import { Neeto } from "@bigbinary/neeto-icons/logos";

应用程序图标

import { NeetoSite } from "@bigbinary/neeto-icons/app-icons";

道具

杂项图标

import { Windows } from "@bigbinary/neeto-icons/misc";
<Windows  size={36} />

import { Razorpay } from "@bigbinary/neeto-icons/misc";
<Razorpay  width={100}  height={32} />
<Razorpay  width={100}  />

道具

字体标识

import { Neeto } from "@bigbinary/neeto-icons/typeface-logos";

反应文件中的任何地方

<Neeto height={24} width={48} />

要件

import { Keyboard } from "@bigbinary/neeto-icons/elements";

反应文件中的任何地方

<Keyboard height={80} width={41} />

如何运作

• 我们使用自定义滚动插件( 可以在 build/index.mjs) 带走所有 .svg 来自 source 文件夹并将其转换为生成 SVG 图标的 React 组件.

• 插件接受一个配置对象作为可以包含以下密钥的参数:

  名称	类型	说明
  选项	object	选项从反应- svgr 传递到变换函数 。 (见 完整视图列表(中文(简体) )
  添加数 转换	function	可被应用到生成的React代码上的额外字符串转换.
  来源	string	SVG 文件所在文件夹的路径
  目标	string	设置生成的反应代码的文件夹路径

• 对于每个图标,将在 generate/icons 文件夹.

• 从那里取出轮子 产生捆绑.

出版指令

咨询 构建和释放软件包 指南 详细介绍如何出版.