@sumup-oss/icons 5.10.0 → 5.11.0

package/README.md

@@ -26,7 +26,7 @@ yarn add @sumup-oss/icons
 
 The easiest way to use an icon in [React](https://reactjs.org/) 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.
 
-```jsx
+```tsx
 import { Check } from '@sumup-oss/icons';
 
 const SuccessMessage = ({ description }) => (
@@ -39,7 +39,7 @@ const SuccessMessage = ({ description }) => (
 
 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:
 
-```jsx
+```tsx
 import { CircleCheckmark } from '@sumup-oss/icons';
 
 const SuccessMessage = ({ description }) => (
@@ -50,20 +50,24 @@ const SuccessMessage = ({ description }) => (
 );
 ```
 
-To change the color of an icon, set the `color` property in CSS. The color will [cascade down](https://css-tricks.com/cascading-svg-fill-color/) since the `fill` and `stroke` attributes of all monochrome icons are set to `currentColor`. Here's an example with a CSS-in-JS library:
+To change the color of an icon, set the `color` property in CSS. The color will [cascade down](https://css-tricks.com/cascading-svg-fill-color/) since the `fill` and `stroke` attributes of all monochrome icons are set to `currentColor`. Here's an example using CSS Modules:
 
-```jsx
-import styled from '@emotion/styled';
-import { Check } from '@sumup-oss/icons';
-
-const GreenCheck = styled(Check)`
+```css
+/* SuccessMessage.module.css */
+.icon {
   color: green;
-`;
+}
+```
 
-const SuccessMessage = ({ description }) => (
+```tsx
+// SuccessMessage.tsx
+import { Check } from '@sumup-oss/icons';
+import styles from './SuccessMessage.module.css';
+
+const SuccessMessage = ({ message }) => (
   <div>
-    <GreenCheck />
-    <span>{description}</span>
+    <Check className={styles.icon} />
+    <span>{message}</span>
   </div>
 );
 ```
@@ -72,13 +76,13 @@ const SuccessMessage = ({ description }) => (
 
 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](https://github.com/webpack-contrib/file-loader) which turns the import into a URL to the SVG.
 
-```jsx
-import checkIcon from '@sumup-oss/icons/check_small.svg';
+```tsx
+import checkIcon from '@sumup-oss/icons/check_24.svg';
 
-const SuccessMessage = ({ description }) => (
+const SuccessMessage = ({ message }) => (
   <div>
-    <img src={checkIcon} alt="" aria-hidden="true" />
-    <span>{description}</span>
+    <img src={checkIcon} alt="" />
+    <span>{message}</span>
   </div>
 );
 ```
@@ -87,18 +91,24 @@ It is not possible to change the color of an external SVG using the `css` color
 
 ### Load from a URL
 
-The latest version of the icon library is [automatically deployed](https://circuit.sumup.com/icons/v2) to [Vercel](https://vercel.com/). 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:
+The latest version of the icon library is [automatically deployed](https://circuit.sumup.com/icons/v2) to [Vercel](https://vercel.com/). The files are hosted behind a global CDN, so they load quickly for all users. Use the `getIconURL` helper function to obtain the full URL with type-safety:
+
+```tsx
+import { getIconURL } from '@sumup-oss/icons';
 
-```html
-<img
-  src="https://circuit.sumup.com/icons/v2/checkmark_16.svg"
-  alt="checkmark"
-/>
+const SuccessMessage = ({ message }) => (
+  <div>
+    <img src={getIconURL('check', '24')} alt="" />
+    <span>{message}</span>
+  </div>
+);
 ```
 
+Alternatively, you can manually construct the URL (`https://circuit.sumup.com/icons/v2/<name>_<size>.svg`). For example:
+
 ```css
 .icon {
-  background-image: url('https://circuit.sumup.com/icons/v2/checkmark_16.svg');
+  background-image: url('https://circuit.sumup.com/icons/v2/check_24.svg');
 }
 ```
 

package/dist/Accessibility.js

@@ -1,29 +1,3 @@
-const _excluded = ["size"];
-function _objectWithoutProperties(e, t) {
-  if (null == e) return {};
-  var o,
-    r,
-    i = _objectWithoutPropertiesLoose(e, t);
-  if (Object.getOwnPropertySymbols) {
-    var n = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < n.length; r++)
-      (o = n[r]),
-        -1 === t.indexOf(o) &&
-          {}.propertyIsEnumerable.call(e, o) &&
-          (i[o] = e[o]);
-  }
-  return i;
-}
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r)
-    if ({}.hasOwnProperty.call(r, n)) {
-      if (-1 !== e.indexOf(n)) continue;
-      t[n] = r[n];
-    }
-  return t;
-}
 function _extends() {
   return (
     (_extends = Object.assign
@@ -64,8 +38,7 @@ const sizeMap = {
   24: Accessibility24,
 };
 export function Accessibility(_ref) {
-  let { size = "24" } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+  let { size = "24", ...props } = _ref;
   const Icon = sizeMap[size] || sizeMap["24"];
   if (
     process.env.NODE_ENV !== "production" &&

package/dist/Account.js

@@ -1,29 +1,3 @@
-const _excluded = ["size"];
-function _objectWithoutProperties(e, t) {
-  if (null == e) return {};
-  var o,
-    r,
-    i = _objectWithoutPropertiesLoose(e, t);
-  if (Object.getOwnPropertySymbols) {
-    var n = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < n.length; r++)
-      (o = n[r]),
-        -1 === t.indexOf(o) &&
-          {}.propertyIsEnumerable.call(e, o) &&
-          (i[o] = e[o]);
-  }
-  return i;
-}
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r)
-    if ({}.hasOwnProperty.call(r, n)) {
-      if (-1 !== e.indexOf(n)) continue;
-      t[n] = r[n];
-    }
-  return t;
-}
 function _extends() {
   return (
     (_extends = Object.assign
@@ -62,8 +36,7 @@ const sizeMap = {
   24: Account24,
 };
 export function Account(_ref) {
-  let { size = "24" } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+  let { size = "24", ...props } = _ref;
   const Icon = sizeMap[size] || sizeMap["24"];
   if (
     process.env.NODE_ENV !== "production" &&

package/dist/Accounting.js

@@ -1,29 +1,3 @@
-const _excluded = ["size"];
-function _objectWithoutProperties(e, t) {
-  if (null == e) return {};
-  var o,
-    r,
-    i = _objectWithoutPropertiesLoose(e, t);
-  if (Object.getOwnPropertySymbols) {
-    var n = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < n.length; r++)
-      (o = n[r]),
-        -1 === t.indexOf(o) &&
-          {}.propertyIsEnumerable.call(e, o) &&
-          (i[o] = e[o]);
-  }
-  return i;
-}
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r)
-    if ({}.hasOwnProperty.call(r, n)) {
-      if (-1 !== e.indexOf(n)) continue;
-      t[n] = r[n];
-    }
-  return t;
-}
 function _extends() {
   return (
     (_extends = Object.assign
@@ -68,8 +42,7 @@ const sizeMap = {
   24: Accounting24,
 };
 export function Accounting(_ref) {
-  let { size = "24" } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+  let { size = "24", ...props } = _ref;
   const Icon = sizeMap[size] || sizeMap["24"];
   if (
     process.env.NODE_ENV !== "production" &&

package/dist/ActivateCard.js

@@ -1,29 +1,3 @@
-const _excluded = ["size"];
-function _objectWithoutProperties(e, t) {
-  if (null == e) return {};
-  var o,
-    r,
-    i = _objectWithoutPropertiesLoose(e, t);
-  if (Object.getOwnPropertySymbols) {
-    var n = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < n.length; r++)
-      (o = n[r]),
-        -1 === t.indexOf(o) &&
-          {}.propertyIsEnumerable.call(e, o) &&
-          (i[o] = e[o]);
-  }
-  return i;
-}
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r)
-    if ({}.hasOwnProperty.call(r, n)) {
-      if (-1 !== e.indexOf(n)) continue;
-      t[n] = r[n];
-    }
-  return t;
-}
 function _extends() {
   return (
     (_extends = Object.assign
@@ -72,8 +46,7 @@ const sizeMap = {
   24: ActivateCard24,
 };
 export function ActivateCard(_ref) {
-  let { size = "24" } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+  let { size = "24", ...props } = _ref;
   const Icon = sizeMap[size] || sizeMap["24"];
   if (
     process.env.NODE_ENV !== "production" &&

package/dist/Active.js

@@ -1,29 +1,3 @@
-const _excluded = ["size"];
-function _objectWithoutProperties(e, t) {
-  if (null == e) return {};
-  var o,
-    r,
-    i = _objectWithoutPropertiesLoose(e, t);
-  if (Object.getOwnPropertySymbols) {
-    var n = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < n.length; r++)
-      (o = n[r]),
-        -1 === t.indexOf(o) &&
-          {}.propertyIsEnumerable.call(e, o) &&
-          (i[o] = e[o]);
-  }
-  return i;
-}
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r)
-    if ({}.hasOwnProperty.call(r, n)) {
-      if (-1 !== e.indexOf(n)) continue;
-      t[n] = r[n];
-    }
-  return t;
-}
 function _extends() {
   return (
     (_extends = Object.assign
@@ -86,8 +60,7 @@ const sizeMap = {
   16: Active16,
 };
 export function Active(_ref) {
-  let { size = "24" } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+  let { size = "24", ...props } = _ref;
   const Icon = sizeMap[size] || sizeMap["24"];
   if (
     process.env.NODE_ENV !== "production" &&

package/dist/Add.js

@@ -1,29 +1,3 @@
-const _excluded = ["size"];
-function _objectWithoutProperties(e, t) {
-  if (null == e) return {};
-  var o,
-    r,
-    i = _objectWithoutPropertiesLoose(e, t);
-  if (Object.getOwnPropertySymbols) {
-    var n = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < n.length; r++)
-      (o = n[r]),
-        -1 === t.indexOf(o) &&
-          {}.propertyIsEnumerable.call(e, o) &&
-          (i[o] = e[o]);
-  }
-  return i;
-}
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r)
-    if ({}.hasOwnProperty.call(r, n)) {
-      if (-1 !== e.indexOf(n)) continue;
-      t[n] = r[n];
-    }
-  return t;
-}
 function _extends() {
   return (
     (_extends = Object.assign
@@ -86,8 +60,7 @@ const sizeMap = {
   16: Add16,
 };
 export function Add(_ref) {
-  let { size = "24" } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+  let { size = "24", ...props } = _ref;
   const Icon = sizeMap[size] || sizeMap["24"];
   if (
     process.env.NODE_ENV !== "production" &&

package/dist/AddEmployees.js

@@ -1,29 +1,3 @@
-const _excluded = ["size"];
-function _objectWithoutProperties(e, t) {
-  if (null == e) return {};
-  var o,
-    r,
-    i = _objectWithoutPropertiesLoose(e, t);
-  if (Object.getOwnPropertySymbols) {
-    var n = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < n.length; r++)
-      (o = n[r]),
-        -1 === t.indexOf(o) &&
-          {}.propertyIsEnumerable.call(e, o) &&
-          (i[o] = e[o]);
-  }
-  return i;
-}
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r)
-    if ({}.hasOwnProperty.call(r, n)) {
-      if (-1 !== e.indexOf(n)) continue;
-      t[n] = r[n];
-    }
-  return t;
-}
 function _extends() {
   return (
     (_extends = Object.assign
@@ -64,8 +38,7 @@ const sizeMap = {
   24: AddEmployees24,
 };
 export function AddEmployees(_ref) {
-  let { size = "24" } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+  let { size = "24", ...props } = _ref;
   const Icon = sizeMap[size] || sizeMap["24"];
   if (
     process.env.NODE_ENV !== "production" &&

package/dist/AddItems.js

@@ -1,29 +1,3 @@
-const _excluded = ["size"];
-function _objectWithoutProperties(e, t) {
-  if (null == e) return {};
-  var o,
-    r,
-    i = _objectWithoutPropertiesLoose(e, t);
-  if (Object.getOwnPropertySymbols) {
-    var n = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < n.length; r++)
-      (o = n[r]),
-        -1 === t.indexOf(o) &&
-          {}.propertyIsEnumerable.call(e, o) &&
-          (i[o] = e[o]);
-  }
-  return i;
-}
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r)
-    if ({}.hasOwnProperty.call(r, n)) {
-      if (-1 !== e.indexOf(n)) continue;
-      t[n] = r[n];
-    }
-  return t;
-}
 function _extends() {
   return (
     (_extends = Object.assign
@@ -68,8 +42,7 @@ const sizeMap = {
  * @deprecated Use the `Add` or `Items` icons instead.
  */
 export function AddItems(_ref) {
-  let { size = "24" } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+  let { size = "24", ...props } = _ref;
   const Icon = sizeMap[size] || sizeMap["24"];
   if (
     process.env.NODE_ENV !== "production" &&

package/dist/Alarm.js

@@ -1,29 +1,3 @@
-const _excluded = ["size"];
-function _objectWithoutProperties(e, t) {
-  if (null == e) return {};
-  var o,
-    r,
-    i = _objectWithoutPropertiesLoose(e, t);
-  if (Object.getOwnPropertySymbols) {
-    var n = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < n.length; r++)
-      (o = n[r]),
-        -1 === t.indexOf(o) &&
-          {}.propertyIsEnumerable.call(e, o) &&
-          (i[o] = e[o]);
-  }
-  return i;
-}
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r)
-    if ({}.hasOwnProperty.call(r, n)) {
-      if (-1 !== e.indexOf(n)) continue;
-      t[n] = r[n];
-    }
-  return t;
-}
 function _extends() {
   return (
     (_extends = Object.assign
@@ -64,8 +38,7 @@ const sizeMap = {
   24: Alarm24,
 };
 export function Alarm(_ref) {
-  let { size = "24" } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+  let { size = "24", ...props } = _ref;
   const Icon = sizeMap[size] || sizeMap["24"];
   if (
     process.env.NODE_ENV !== "production" &&

package/dist/Alelo.js

@@ -1,29 +1,3 @@
-const _excluded = ["size"];
-function _objectWithoutProperties(e, t) {
-  if (null == e) return {};
-  var o,
-    r,
-    i = _objectWithoutPropertiesLoose(e, t);
-  if (Object.getOwnPropertySymbols) {
-    var n = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < n.length; r++)
-      (o = n[r]),
-        -1 === t.indexOf(o) &&
-          {}.propertyIsEnumerable.call(e, o) &&
-          (i[o] = e[o]);
-  }
-  return i;
-}
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r)
-    if ({}.hasOwnProperty.call(r, n)) {
-      if (-1 !== e.indexOf(n)) continue;
-      t[n] = r[n];
-    }
-  return t;
-}
 function _extends() {
   return (
     (_extends = Object.assign
@@ -115,8 +89,7 @@ const sizeMap = {
   24: Alelo24,
 };
 export function Alelo(_ref) {
-  let { size = "24" } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+  let { size = "24", ...props } = _ref;
   const Icon = sizeMap[size] || sizeMap["24"];
   if (
     process.env.NODE_ENV !== "production" &&

package/dist/Alert.js

@@ -1,29 +1,3 @@
-const _excluded = ["size"];
-function _objectWithoutProperties(e, t) {
-  if (null == e) return {};
-  var o,
-    r,
-    i = _objectWithoutPropertiesLoose(e, t);
-  if (Object.getOwnPropertySymbols) {
-    var n = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < n.length; r++)
-      (o = n[r]),
-        -1 === t.indexOf(o) &&
-          {}.propertyIsEnumerable.call(e, o) &&
-          (i[o] = e[o]);
-  }
-  return i;
-}
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r)
-    if ({}.hasOwnProperty.call(r, n)) {
-      if (-1 !== e.indexOf(n)) continue;
-      t[n] = r[n];
-    }
-  return t;
-}
 function _extends() {
   return (
     (_extends = Object.assign
@@ -82,8 +56,7 @@ const sizeMap = {
   16: Alert16,
 };
 export function Alert(_ref) {
-  let { size = "24" } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+  let { size = "24", ...props } = _ref;
   const Icon = sizeMap[size] || sizeMap["24"];
   if (
     process.env.NODE_ENV !== "production" &&

package/dist/AlternativePaymentMethod.js

@@ -1,29 +1,3 @@
-const _excluded = ["size"];
-function _objectWithoutProperties(e, t) {
-  if (null == e) return {};
-  var o,
-    r,
-    i = _objectWithoutPropertiesLoose(e, t);
-  if (Object.getOwnPropertySymbols) {
-    var n = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < n.length; r++)
-      (o = n[r]),
-        -1 === t.indexOf(o) &&
-          {}.propertyIsEnumerable.call(e, o) &&
-          (i[o] = e[o]);
-  }
-  return i;
-}
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r)
-    if ({}.hasOwnProperty.call(r, n)) {
-      if (-1 !== e.indexOf(n)) continue;
-      t[n] = r[n];
-    }
-  return t;
-}
 function _extends() {
   return (
     (_extends = Object.assign
@@ -100,8 +74,7 @@ const sizeMap = {
   32: AlternativePaymentMethod32,
 };
 export function AlternativePaymentMethod(_ref) {
-  let { size = "32" } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+  let { size = "32", ...props } = _ref;
   const Icon = sizeMap[size] || sizeMap["32"];
   if (
     process.env.NODE_ENV !== "production" &&

package/dist/AmericanExpress.js

@@ -1,29 +1,3 @@
-const _excluded = ["size"];
-function _objectWithoutProperties(e, t) {
-  if (null == e) return {};
-  var o,
-    r,
-    i = _objectWithoutPropertiesLoose(e, t);
-  if (Object.getOwnPropertySymbols) {
-    var n = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < n.length; r++)
-      (o = n[r]),
-        -1 === t.indexOf(o) &&
-          {}.propertyIsEnumerable.call(e, o) &&
-          (i[o] = e[o]);
-  }
-  return i;
-}
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r)
-    if ({}.hasOwnProperty.call(r, n)) {
-      if (-1 !== e.indexOf(n)) continue;
-      t[n] = r[n];
-    }
-  return t;
-}
 function _extends() {
   return (
     (_extends = Object.assign
@@ -120,8 +94,7 @@ const sizeMap = {
   24: AmericanExpress24,
 };
 export function AmericanExpress(_ref) {
-  let { size = "24" } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+  let { size = "24", ...props } = _ref;
   const Icon = sizeMap[size] || sizeMap["24"];
   if (
     process.env.NODE_ENV !== "production" &&

package/dist/Apm.js

@@ -1,29 +1,3 @@
-const _excluded = ["size"];
-function _objectWithoutProperties(e, t) {
-  if (null == e) return {};
-  var o,
-    r,
-    i = _objectWithoutPropertiesLoose(e, t);
-  if (Object.getOwnPropertySymbols) {
-    var n = Object.getOwnPropertySymbols(e);
-    for (r = 0; r < n.length; r++)
-      (o = n[r]),
-        -1 === t.indexOf(o) &&
-          {}.propertyIsEnumerable.call(e, o) &&
-          (i[o] = e[o]);
-  }
-  return i;
-}
-function _objectWithoutPropertiesLoose(r, e) {
-  if (null == r) return {};
-  var t = {};
-  for (var n in r)
-    if ({}.hasOwnProperty.call(r, n)) {
-      if (-1 !== e.indexOf(n)) continue;
-      t[n] = r[n];
-    }
-  return t;
-}
 function _extends() {
   return (
     (_extends = Object.assign
@@ -72,8 +46,7 @@ const sizeMap = {
  * @deprecated Use the `AlternativePaymentMethod` icon instead.
  */
 export function Apm(_ref) {
-  let { size = "32" } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
+  let { size = "32", ...props } = _ref;
   const Icon = sizeMap[size] || sizeMap["32"];
   if (
     process.env.NODE_ENV !== "production" &&