Create Custom Icons with Grommet.io

Getting Started with Grommet.io Icons

To get started you’ll need to first add Grommet.io Icons to your project:

# Yarn
yarn add grommet-icons

# or with NPM
npm install --save grommet-icons

Using the icons is very simple too:

import { Schedule } from 'grommet-icons';
<Schedule color='plain' size='xlarge' /> 
<Schedule size='large' /> 
<Schedule color='brand' /> 
<Schedule /> 

For a list of all of the available icons go to icons.grommet.io

Getting Started with React SVG Components

This article assumes you’re using create-react-app which uses SVGR under the hood. If you’re not using create-react-app then you will need to include it in your project yourself. See the SVGR documentation.

Once you have SVGR set up you can use it this way:

import { ReactComponent as Star } from './star.svg';

const App = () => (
  <div>
    <Star />
  </div>
)

Note, you have to import the SVG as ReactComponent which is a special convention of SVGR.

Combining Grommet.io Icons and SVGR

Once you have both Grommet.io Icons and SVGR in your project you can now make your own custom icons by doing this:

import { Blank } from 'grommet-icons';
import { ReactComponent as Star} from "./star.svg";


const StarIcon = props => (
  <Blank {...props}>
    <Star />
  </Blank>
);

You need to login in order to like this post: click here