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.

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

1. Install this plugin:

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

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

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

Licence

Please read the legal disclaimer of Simple Icons.

Credits

Thanks @mikevader for the inspriration.