简单图标插件

欢迎光临 简单图标 插头!

此插件会在您的应用程序中添加更多图标, 例如可以用于链接 .

使用量

设置后, 您可以使用这样的图标

---
apiVersion: backstage.io/v1alpha1
kind: Component
metadata:
  name: simple-icons
  links:
    - title: Prometheus
      url: https://google.ch
      icon: prometheus
    - title: Grafana
      url: https://google.ch
      icon: grafana
    - title: Google BigQuery
      url: https://google.ch
      icon: googlebigquery
    - title: 1.1.1.1
      url: https://google.ch
      icon: 1dot1dot1dot1
    - title: Github copilot
      url: https://google.ch
      icon: githubcopilot
    - title: Backstage
      url: https://google.ch
      icon: backstage

图标的名称可以从 https://simpleicons.org/ (中文(简体) ) 在图标名称上徘徊,并使用复制功能.

设置

1. 安装此插件 :

# From your Backstage root directory
yarn --cwd packages/app add @dweber019/backstage-plugin-simple-icons

2. 将图标添加到您的应用程序

// packages/app/src/App.tsx

import { simpleIconsColor } from '@dweber019/backstage-plugin-simple-icons';

const app = createApp({
  apis,
  bindRoutes({ bind }) {
    ...
  },
  ...
  icons: simpleIconsColor,
});

你用得着 import { simpleIcons } from '@dweber019/backstage-plugin-simple-icons'; 黑白相间的图标.

如果您想要仅提供一组图标, 您可以使用

// packages/app/src/App.tsx

import { siNodedotjs } from 'simple-icons';
import { createIcon } from '@dweber019/backstage-plugin-simple-icons';

const app = createApp({
  apis,
  bindRoutes({ bind }) {
    ...
  },
  ...
  icons: {
    nodedotjs: createIcon(siNodedotjs),
  },
});

实体介绍 API

此插件还导出一个执行 EntityPresentationApi 以显示基于 注释 simpleicons.org/icon-slug。 。 。 .

为工作添加以下一行代码

// packages/app/src/apis.ts

import { catalogApiRef, entityPresentationApiRef } from '@backstage/plugin-catalog-react';
import { SimpleIconsEntityPresentationApi } from '@dweber019/backstage-plugin-simple-icons';

export const apis: AnyApiFactory[] = [
  ...
  createApiFactory({
    api: entityPresentationApiRef,
    deps: { catalogApi: catalogApiRef },
    factory: ({ catalogApi }) => {
      return SimpleIconsEntityPresentationApi.create({ catalogApi });
    },
  }),
];

许可证

请读一下 法律免责声明 联 合 国 简单图标。 。 。 .

贷项

谢谢 @mikevader (英语) 为入息.