@danske/sapphire-icons

Sapphire package for icons
You can use raw svg icons from /svg folder, or use one of the other available formats:

• ./react: SVG icons exported as React components

  import { CheckMarkSmall } from '@danske/sapphire-icons/react';
  const icon = <CheckMarkSmall />;

  Note You need to install the react peerDependency yourself

  It's also possible to import icons from their direct paths:

  import CheckMarkSmall from '@danske/sapphire-icons/react/CheckMarkSmall';

  This might improve build times a bit.
  And if you for some reason have issues with tree-shaking (which should work out of the box for build tools like Webpack and Vite), you can import directly like this to just avoid tree-shaking.

• ./js: icons exported as JavaScript objects

  import { checkMarkSmall } from '@danske/sapphire-icons/js';
  console.log(checkMarkSmall.data); // svg content of the icon

• ./font: a ttf font with all the icons and a codepoints.js (with types) which gives you a way to refer to each character in the font (icon) by name

  // this is an example from a react-native codebase // (assuming `@danske/sapphire-icons/build/font/icons.ttf` was previously linked)
  // https://gitlab.com/db-mobile-banking/sapphire/-/blob/master/src/Icon/Icon.tsx
  
  import { createIconSet } from 'react-native-vector-icons';
  import { ICONS_CODEPOINTS } from '@danske/sapphire-icons/font/codepoints';
  const IconComponent = createIconSet(ICONS_CODEPOINTS, 'icons', 'icons.ttf');