Package Exports

@devseed-ui/collecticons

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@devseed-ui/collecticons) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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. ```code lang: js

import collecticon from '@devseed-ui/collecticons';

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


```hint
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. 😉