npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@sumup/icons

v4.1.3

Published

A collection of icons by SumUp

Downloads

12,133

Readme

@sumup/icons

A collection of icons for the web, part of the SumUp Circuit Design System.

Stars Version Coverage License Contributor Covenant

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.