@sumup/icons
v4.1.3
Published
A collection of icons by SumUp
Downloads
13,954
Maintainers
Keywords
Readme
@sumup/icons
A collection of icons for the web, part of the SumUp Circuit Design System.
Installation
Depending on your preference, run one of the following in your terminal:
# With npm
npm install @sumup/icons
# With yarn v1
yarn add @sumup/icons
Usage
Import as React component
The easiest way to use an icon in React is to import it as a component. This approach works out of the box (no special loaders needed), is tree-shaking enabled, and comes with TypeScript typings included.
import { Check } from '@sumup/icons';
const SuccessMessage = ({ description }) => (
<div>
<Check />
<span>{description}</span>
</div>
);
Some icons have multiple sizes. They default to size '24', if supported, or to the smallest available size. Use the size
prop to show one of the other sizes ('16' or '32') instead:
import { CircleCheckmark } from '@sumup/icons';
const SuccessMessage = ({ description }) => (
<div>
<CircleCheckmark size="24" />
<span>{description}</span>
</div>
);
To change the color of an icon, set the color
property in CSS. The color will cascade down since the fill
and stroke
attributes of all monochrome icons are set to currentColor
. Here's an example with a CSS-in-JS library:
import styled from '@emotion/styled';
import { Check } from '@sumup/icons';
const GreenCheck = styled(Check)`
color: green;
`;
const SuccessMessage = ({ description }) => (
<div>
<GreenCheck />
<span>{description}</span>
</div>
);
Import as SVG file
Alternatively, it's possible to import the raw SVG files. Most bundlers require a special loader to make this work. For Webpack, we recommend the file-loader which turns the import into a URL to the SVG.
import checkIcon from '@sumup/icons/check_small.svg';
const SuccessMessage = ({ description }) => (
<div>
<img src={checkIcon} alt="" aria-hidden="true" />
<span>{description}</span>
</div>
);
It is not possible to change the color of an external SVG using the css
color property. Instead, you can use the CSS filter
hack to colorize the icon.
Load from a URL
The latest version of the icon library is automatically deployed to Vercel. The files are hosted behind a global CDN, so they load quickly for all users. You can load the icons from https://circuit.sumup.com/icons/v2/<name>_<size>.svg
. Below are some examples:
<img
src="https://circuit.sumup.com/icons/v2/checkmark_16.svg"
alt="checkmark"
/>
.icon {
background-image: url('https://circuit.sumup.com/icons/v2/checkmark_16.svg');
}
It is not possible to change the color of an external SVG using the CSS color
property. Instead, you can use the CSS filter
hack to colorize the icon.