# Zebra icons library

This library contains set of zebra icons assets.

Base on this font's for css icons are build along with modified svg so they can be use as icons with changable colors.

## Usage

```css
@import '@zebra/icons'; // this will import the general icons
```

```css
@import '@zebra/icons/communication'; //this will import all icons in compunication section
```

```html
<i class="icon-communication-alarm"></i>
```

### Usage with React
For React we recoment using `@svgr/webpack` this way only the required icons will be imported:

Here is an example of `@svgr/webpack` setup:

**Basic webpack setup**
```js
  rules: [
    {
      test: /\.svg$/,
      use: ["@svgr/webpack"],
    }
  ]
````

**Extended webpack example**

this example add viewBox to the svg so can be scaled with adding `width` or `height` to the generated commponent
```js
  rules: [
    {
      test: /\.svg$/,
      use: [
        {
          loader: '@svgr/webpack',
          options: {
            template: (
              { template },
              opts,
              { imports, componentName, props, jsx, exports }
            ) => template.ast`
            ${imports}
            const ${componentName} = (${props}) => {
              const ref = React.createRef();

              React.useLayoutEffect(() => {
                const box = ref.current.getBBox();

                ref.current.setAttribute(
                  'viewBox',
                  [0, 0, box.width, box.height].join(' '),
                );
              });

              props = { ...props, ref };

              return ${jsx};
            };

            export default ${componentName};
          `,
          },
        },
      ],
    }
  ]
````				

### The following icons currently do not work with the css fonts ###

General:

* Brightness down

Messaging

* Dislike outline
* Like Outline

Transportation and Logistics

* Humidity