数据层图标

React.js和用于数据产品的JupyterLab图标.

此寄存器包含一个收藏反应.js 图标数据层,覆盖朱比特语Name, (中文(简体) ), 库伯涅斯以及其他生态系统.

图标也作为实验室对象,在朱皮特拉布。。。 .

欢迎您在自己的数据产品中使用这些图标。可在 https://datalayer.design (英语),给我们一颗恒星如果你喜欢的话.

软件包发布于国家防范机制.js @datalayer/icons-resact 并可以添加为对任何JavaScript或TypeScript项目的依赖.

请打开一个问题或一个拉动请求来更新,添加... 您的图标或任何建议, 关于此寄存器内容的问题.

我们正在寻找与现有数据开发者社区的联系,比如 Jupyter社区。。。 .

用于 react.js 开发者

添加 @datalayer/icons-react 作为依赖,导入一个图标并渲染它.

import { DatalayerGreenIcon } from "@datalayer/icons-react";

render(
  <DatalayerGreenIcon/>
  <DatalayerGreenIcon size="large" colored/>
)

示例 AiAgentIcon 和具有主题意识的颜色.

import React from 'react';
import { AiAgentIcon } from '@datalayer/icons-react';
import {
  ThemedProvider,
  AppearanceControlsWithStore,
  useThemeStore,
  useColorPalette,
} from '@datalayer/primer-addons';

const AiAgentIconExample = () => {
  const palette = useColorPalette();

  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <AiAgentIcon size="large" colored style={{ color: palette.primary }} />
      <AiAgentIcon size="large" style={{ color: palette.primary }} />
    </div>
  );
};

export const App = () => (
  <ThemedProvider useStore={useThemeStore}>
    <AppearanceControlsWithStore useStore={useThemeStore} />
    <AiAgentIconExample />
  </ThemedProvider>
);

用于 JupyterLab 开发者

朱皮特拉布图标实验室课。 JupyterLab 机械技术是一些限制,因为无法创建 LabIcon 从 React.js 组件(虽然能够从 LabIcon 中导出 React.js 组件),或无法从远程位置(像 HTTP 或 S3 服务器)装入 SVG ).

为了方便使用,我们把所有图标都暴露为 LabIcon 可以导入和直接使用.

import { scientistIconLabIcon } from '@datalayer/icons-react/data2/ScientistIconLabIcon';

如果您需要从 SVG 创建自己的 React 组件,只需导入优化的 SVG 文物,并在您的应用程序中重新使用.

import satelliteIconSvg from '@datalayer/icons-react/data2/SatelliteIcon.svg';

要从 TypeScript 装入 SVG, 您需要创建类型声明文件 .

// svg.d.ts
declare module "*.svg" {
  const value: any;
  export default value;
}

数据产品设计师

数据产品设计师可能会添加或更新现有的图标.

为此,初始步骤是克隆这个寄存器并安装依赖性.

git clone https://github.com/datalayer/icons
cd icons
npm install

设计者将创建 SVG 并将其添加到其中之一 svg 此寄存器的子文件夹.

要在此寄存器中添加图标, 请添加 SVG( 最好是视图框) 0 0 20 20图标之一 svg 子文件夹。然后执行以下命令.

TODO: 描述差异 data1 财务报告和审定财务报表 data2。。。 .

npm run build-icons

您可以预览运行以下命令的图标( 有时由于显示许多图标, 颜色不对应) .

npm start

组合

我们将努力为绘图工具创建stencils。。。 .

他们

我们的目标是支持初级反应, (中文(简体) ), 朱皮特拉布作为多龙主题.

用户

您可以下载 PNG 或者说 SVG 图标的版本来自 https://datalayer.design (英语)。。。 .

图标图片库

要查看可用图标的相册, 请运行以下命令 .

npm install
npm run build
npm run dev

图标属性

colored - 显示图标的彩色版本(如果可用).
size数字 : "small" | "medium" | "large" | number - 指定图标的大小 - "small" 默认.

// For example.
<DatalayerIcon colored size="large"/>

SVG 开源

这些是开源SVG的有用地.

释放

数据层图标在国家。。。 .

许可证

图标根据麻省理工学院许可条款发布(参见: 自由主义) (中文(简体) ).

三会偶像根据各自许可证进行再分配以方便.

@datalayer/icons-all

数据层图标

用于 react.js 开发者

用于 JupyterLab 开发者

数据产品设计师

组合

他们

用户

图标图片库

图标属性

SVG 开源

释放

许可证

版本与发布记录

关于 @datalayer/icons-all 的常见问题

如何安装 @datalayer/icons-all？

@datalayer/icons-all 支持 TypeScript 吗？

@datalayer/icons-all 支持 ESM 还是 CommonJS？

@datalayer/icons-all 可以商用吗？

@datalayer/icons-all 的下载量有多少？

@datalayer/icons-all 还在维护吗？