grommet-icons

WebJar for grommet-icons

License	Apache-2.0
GroupId	org.webjars.npm
ArtifactId	grommet-icons
Last Version	0.16.0
Release Date	Jun 1, 2018
Type	jar
Description	grommet-icons WebJar for grommet-icons
Project URL	http://webjars.org
Source Code Management	https://github.com/grommet/grommet-icons

Download grommet-icons

Filename	Size
grommet-icons-0.16.0.pom
grommet-icons-0.16.0.jar	1 MB
grommet-icons-0.16.0-sources.jar	22 bytes
grommet-icons-0.16.0-javadoc.jar	22 bytes

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/grommet-icons/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>grommet-icons</artifactId>
    <version>0.16.0</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/grommet-icons/
implementation 'org.webjars.npm:grommet-icons:0.16.0'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/grommet-icons/
implementation ("org.webjars.npm:grommet-icons:0.16.0")

Apache Buildr

'org.webjars.npm:grommet-icons:jar:0.16.0'

Apache Ivy

<dependency org="org.webjars.npm" name="grommet-icons" rev="0.16.0">
  <artifact name="grommet-icons" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='grommet-icons', version='0.16.0')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "grommet-icons" % "0.16.0"

Leiningen

[org.webjars.npm/grommet-icons "0.16.0"]

Dependencies

compile (1)

Group / Artifact	Type	Version
org.webjars.npm : deep-assign	jar	[2.0.0,3)

Project Modules

There are no modules declared in this project.

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)

2. Run pack

$ npm run build

3. Test and run linters:

$ npm run lint

4. Generate React icons:

$ npm run generate-icons

grommet

Streamline the way you develop apps

Versions

Version
0.16.0 Jun 1, 2018