grommet-icons
TypeScript icon, indicating that this package has built-in type declarations

4.11.0 • Public • Published

Slack Build Status Test Coverage Dependency Status PRs Welcome

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:

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)

  2. Run pack

    $ npm run build

  3. Test and run linters:

    $ npm run lint

  4. Generate React icons:

    $ npm run generate-icons

Readme

Keywords

none

Package Sidebar

Install

Weekly Downloads

28,610

Version

4.11.0

License

Apache-2.0

Unpacked Size

5.26 MB

Total Files

1895

Last publish

Collaborators

  • alansouzati
  • ericsoderberg
  • shimisun