@devseed-ui/collecticons

@devseed-ui/collecticons

This modules allows you to use the collecticons icon font with the UI Library.

Many of the components use collecticons so it is advised to include this module.

Setup

To be able to use the collecticons, the global styles must be included.

yarn add @devseed-ui/collecticons

And add the collecticons global styles to the root of your application:

lang: jsx
---
import { DevseedUiThemeProvider } from '@devseed-ui/theme-provider';
import { CollecticonsGlobalStyle } from '@devseed-ui/collecticons';

export default function App () {
  return (
    <DevseedUiThemeProvider>
      <CollecticonsGlobalStyle />

      <Home title="Ui Library" />
    </DevseedUiThemeProvider>
  );
}

Usage

Some components use collecticons directly and you don't have to do anything. Others, like the Button allow you to pick an icon through a prop.

span: 3
---
  <Button
    variation="base-raised-light"
    size="small"
    title="Sample button"
    onClick={() => {}}
    useIcon="brand-collecticons"
  >
    Click Me
  </Button>

span: 3
---
  <DevseedUiThemeProvider>
    <CollecticonsGlobalStyle />

    <Button
      variation="base-raised-light"
      size="small"
      title="Sample button"
      onClick={() => {}}
      useIcon="brand-collecticons"
    >
      Click Me
    </Button>
  </DevseedUiThemeProvider>

You can also use the icon as part of a pseudo element with styled-components.

lang: js
---
import collecticon from '@devseed-ui/collecticons';

const Icon = styled.span`
  ::before {
    ${collecticon('trash-bin')}
  }
`;

The easiest way to know a collecticon's name is to visit [collecticons.io](http://collecticons.io/) and clicking the icon you want.  
Its name will be copied to your clipboard. 😉