Skip to content
master
Switch branches/tags
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

Slack Build Status Test Coverage Dependency Status PRs Welcome

grommet-icons

Iconography for Grommet and React.js

Install

npm install grommet-icons grommet-styles --save

or

yarn add grommet-icons grommet-styles

Usage

import { Facebook } from 'grommet-icons';

<Facebook />
<Facebook color='plain' />
<Facebook size='large' />
<Facebook size='xlarge' />

Visit our site for more icons.

Create Your Own Grommet Icon

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

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

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

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 <ZoomOut color='brand' />.

  import { ThemeProvider } from 'styled-components';
  import { base, deepMerge } from 'grommet-icons';
  const theme = deepMerge(base, {
    global: {
      colors: {
        brand: '#ff0000',
      },
    },
  });
  return (
    <ThemeContext.Provider theme={theme}>
      <ZoomOut color='brand' />
    </ThemeContext.Provider>
  );

Build

To build this library, execute the following commands:

  1. Install NPM modules
$ npm install (or yarn install)
  1. Run pack
$ npm run build
  1. Test and run linters:
$ npm run lint
  1. Generate React icons:
$ npm run generate-icons