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