iconography for grommet apps.
npm install grommet-icons    ![PRs Welcome][contributing]
Iconography for Grommet and React.js
npm install grommet-icons --save
or
yarn add grommet-icons
``javascript
import { Facebook } from 'grommet-icons';
`
Visit our site for more icons.
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 .
`javascript
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 /}
xmlns="http://www.w3.org/2000/svg"
>
);
export const MyOtherIcon = (props) => (
{/ your 24x24 svg goes here - e.g. here's a 24x24px circle /}
xmlns="http://www.w3.org/2000/svg"
>
);
`
Check out this codesandbox
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. Forcolors: { brand: '#ff0000' }
instance: would allow you to use.
`javascript``
import { ThemeProvider } from 'styled-components';
import { base, deepMerge } from 'grommet-icons';
const theme = deepMerge(base, {
global: {
colors: {
brand: '#ff0000',
},
},
});
return (
);
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
[contributing]: CONTRIBUTING.md