grommet-icons
v4.12.1
Published
iconography for grommet apps.
Downloads
107,330
Keywords
Readme
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';
<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:
If an icon is decorative and does not need to be read out by assisstive technologies, use <Blank />
with default properties. If the icon should be read out by assisstive technologies, apply aria-hidden={undefined}
and an appropriate a11yTitle
to <Blank />
.
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"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="12" cy="12" r="5" />
</svg>
</Blank>
);
export const MyOtherIcon = (props) => (
<Blank a11yTitle="Descriptive icon name" aria-hidden={undefined} {...props}>
{/* your 24x24 svg goes here - e.g. here's a 24x24px circle */}
<svg
viewBox="0 0 24 24"
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:
Install NPM modules
$ npm install (or yarn install)
Run pack
$ npm run build
Test and run linters:
$ npm run lint
Generate React icons:
$ npm run generate-icons