Icons of Spirit Design System.
🙋🏻♂️ 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
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.
You can use SVG files directly from @lmc-eu/spirit-icons/svg
directory by importing them or copying them to your app structure.
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
.
Icon
suffix.
import { WarningIcon } from '@lmc-eu/spirit-icons/react';
// or
import WarningIcon from '@lmc-eu/spirit-icons/react/WarningIcon';
<WarningIcon />;
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] }}
/>
);
};