To help you get started, we've collected the most common ways that grommet-icons is being used within popular public projects.

grommet / grommet / themes / base.js View on Github

pad: { horizontal: 'small', vertical: 'xsmall' },
        background: {
          dark: 'dark-2',
          light: 'light-2'
        }
      },
      header: {
        border: { side: 'bottom', size: 'small' },
        pad: { horizontal: 'small', vertical: 'xsmall' },
        background: {
          dark: 'dark-1',
          light: 'light-1'
        }
      },
      icons: {
        ascending: _grommetIcons.FormDown,
        contract: _grommetIcons.FormUp,
        descending: _grommetIcons.FormUp,
        expand: _grommetIcons.FormDown
      },
      resize: {
        border: {
          side: 'right',
          color: {
            dark: 'border-dark',
            light: 'border-light'
          }
        }
      }
    },
    // drop: {
    //   maxHeight: undefined,

View more ways to use grommet-icons

grommet-icons

Iconography for Grommet and React.js

Install

npm install grommet-icons --save

or

yarn add grommet-icons

Usage

import { Facebook } from 'grommet-icons';

Visit our site for more icons.

Create Your Own Grommet Icon

Any 24x24px SVG may be converted to an icon using the `` icon. For example:

If an icon is decorative and does not need to be read out by assisstive technologies, use with default properties. If the icon should be read out by assisstive technologies, apply `aria-hidden={undefined}` and an appropriate `a11yTitle` to.

import React from 'react';
import { Blank } from 'grommet-icons';

export const MyIcon = (props) => (
  
    {/* your 24x24 svg goes here - e.g. here's a 24x24px circle */}
    <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <circle r="5" cy="12" cx="12"></circle>
    </svg>
  
);

export const MyOtherIcon = (props) =&gt; (
  
    {/* your 24x24 svg goes here - e.g. here's a 24x24px circle */}
    <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <circle r="5" cy="12" cx="12"></circle>
    </svg>
  
);

Try

Check out this codesandbox

Customize

The theme for the icon supports different colors and sizes. The default definition is:

theme = {
  global: {
    colors: {
      icon: '#666666',
    }
  },
  icon: {
    size: {
      small: '12px',
      medium: '24px',
      large: '48px',
      xlarge: '96px',
    },
    extend: undefined,
  },
}

You can customize sizing and/or colors by specifying your own theme. The colors property allows you to use color names. For instance: colors: { brand: '#ff0000' } would allow you to use ``.

import { ThemeProvider } from 'styled-components';
import { base, deepMerge } from 'grommet-icons';
const theme = deepMerge(base, {
  global: {
    colors: {
      brand: '#ff0000',
    },
  },
});
return (
  
    
  
);

Build

To build this library, execute the following commands:

1. Install NPM modules

   $ npm install (or yarn install)

2. Run pack

   $ npm run build

3. Test and run linters:

   $ npm run lint

4. Generate React icons:

   $ npm run generate-icons