@dweber019/backstage-plugin-simple-icons NPM

Simple Icons Plugin

Welcome to the Simple Icons plugin!

This plugin will add more icons to your app, which can be used in links for example.

color no color light no color dark

Usage

After setup you can use icons like this

---
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

The name of the icon can be copied from https://simpleicons.org/ by hovering over the icon name and use the copy function.

Setup

Install this plugin:

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

Add the icons to your app

// packages/app/src/App.tsx

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

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

You can use import { simpleIcons } from '@dweber019/backstage-plugin-simple-icons'; for black and white icons.

If you want to provide just a subset of icons you can do so by using

// 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),
  },
});

Entity presentation API

This plugin also exports a implementation of the EntityPresentationApi to display the simple icons based on the annotation simpleicons.org/icon-slug.

entity presentation api

For this to work add the following line of code

// 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 });
    },
  }),
];