@lmc-eu/spirit-icons

@lmc-eu/spirit-icons

Icons of Spirit Design System.

Install

🙋🏻‍♂️ Hold on! Do you already use spirit-web? Then you don't need to install this package because spirit-icons is installed automatically as a dependency of spirit-web.

If you want to use just spirit-icons alone in your project, run:

yarn add @lmc-eu/spirit-icons

or

npm install --save @lmc-eu/spirit-icons

Colors

Icons with the suffix -colored come with predefined colors, so no additional coloring is needed. In contrast, icons without this suffix inherit the color from the currentColor CSS property of their parent element or themself.

Usage

SVG files

You can use SVG files directly from @lmc-eu/spirit-icons/svg directory by importing them or copying them to your app structure.

React

You can import SVG files directly from @lmc-eu/spirit-icons/svg directory in React components using a library like React SVGR.

Example configuration for Webpack:

rules.unshift({
  test: /\.svg$/,
  enforce: 'pre',
  use: ['@svgr/webpack'],
});

import Warning from '@lmc-eu/spirit-icons/svg/warning.svg';

<Warning />;

Or you can import React components directly from @lmc-eu/spirit-icons/react.

⚠️ Beware of naming, as all React component does, they are named using PascalCase and Icon suffix.

import { WarningIcon } from '@lmc-eu/spirit-icons/react';
// or
import WarningIcon from '@lmc-eu/spirit-icons/react/WarningIcon';

<WarningIcon />;

Icons paths

Alternatively you can use an icons object which consists of an icon name and SVG content. Thus you can fabricate your icon yourself.

import icons from '@lmc-eu/spirit-icons/icons';

export const Icon = ({ name, , size }) => {
  return (
    <svg
      fill="currentColor"
      width={size}
      height={size}
      dangerouslySetInnerHTML={{ __html: icons[name] }}
    />
  );
};