Ultraviolet Icons is a set of components based on SVG icons. It provides a set of icons that can be used in your projects.

For icons to work you will need to install some extra dependencies, such as @ultraviolet/themes and @emotion/react.

$ pnpm add @ultraviolet/icons @ultraviolet/themes @emotion/react

You can then add ThemeProvider to your applications and use the provided theme from @ultraviolet/themes or use your own.

import { ThemeProvider } from '@emotion/react'
import { ProductIcon } from '@ultraviolet/icons'
import { consoleLightTheme } from '@ultraviolet/themes'

const App = () => (
  <ThemeProvider theme={consoleLightTheme}>
    <ProductIcon name="sdkGo" size="medium" variant="primary"/>
  </ThemeProvider>
)

Note: To generate your own theme easily you can check the theme generator.

N.B. To allow typescript theme typings with @emotion/styled components, you'll have to define the @emotion/react module Theme interface in your project.

Example, in a emotion.d.ts file:

import '@emotion/react'
import type { consoleLightTheme } from '@ultraviolet/themes'

type UltravioletUITheme = typeof consoleLightTheme

declare module '@emotion/react' {
  export interface Theme extends UltravioletUITheme {}
}

Checkout our documentation website.

📝 You can participate in the development and start contributing to it.