@zebra-fed/icons

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

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

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

<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

  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

  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