SVG icons

Icons can be used as react components or as web components. TypeScript definitions are included.

See also https://kobber.gyldendal.no/merkevare/ikoner.

Usage

Installation

Run one of the following commands to add @gyldendal/kobber-icons to your project:

npm install @gyldendal/kobber-icons

yarn add @gyldendal/kobber-icons

Depending on you usage, you might need to to install the optional peerDependencies.

Using the svgs

Icons can be imported as react components, as web components, or as an SVG sprite.

As a react component

import { ArrowRight } from "@gyldendal/kobber-icons/react";
const App = () => <ArrowRight />;

As a custom element

Custom element icon names are prefixed with kobber-, to ensure valid naming.

<script>
  import "@gyldendal/kobber-icons/web-components";
</script>
<kobber-arrow_right />

Auto-registering web components

To make the web components render they need to be registered:

window.customElements.define("kobber-add_figure", AddFigure);

This can be done automatically using the init-function:

import { init } from "@gyldendal/kobber-icons/init";

init({ autoRegisterWebComponents: true });

If using kobber-components in concert with kobber-icons, both components and icons should be registered at the same time. If kobber-icons are registered at a later time, kobber-components will not be able to set the components' classes that are needed to present icons within them.

[!TIP] Check icons readme on registering icons, and more options.

Use sprite directly

Include the sprite @gyldendal/kobber-icons/symbols/kobber-icons.svg in your html, and reference its symbols. The file @gyldendal/kobber-icons/symbols/kobber-icons-lists.ts contains a list of all icons and a type declaration, which can be useful.

Symbol ids are prefixed with kobber-, to avoid collisions with any other id in the html (including svg symbols in other sprites).

(Note that such ID references do not currenly work across the shadow dom barrier.)

<svg role="presentation" aria-hidden="true">
  <use href="#kobber-arrow_right" />
</svg>

Styling

Color

Icons have fill=currentcolor. This means the icon components' color will inherit from their parent element.

Size

Icons take the size prop for sizing.

Example:

import { User } from "@gyldendal/kobber-icons/dist/web-components";
<User size="large" />;

Other styling

Web components

Each icon web component :host is display: flex;, as this is useful for most usages. As this style is on the :host selector, consumers are free to override that style on the icon component container (when, for example, inline styling is required).

Likewise, other styles can be applied to the icon component container, like stroke or stroke width.

Styling react components

These are injected as SVG elements into HTML. This means you can style the SVG element the same way you style HTML elements.

Development

⚡ Quick how to: Update icons

1. Get all current icons from DAM:
   • Download from DAM, or
   • Recieve svgs from a colleague with access to DAM.
2. Delete all content in folder kobber/packages/kobber-icons/src/assets/svgs.
3. Extract svgs to folder kobber/packages/kobber-icons/src/assets/svgs.
4. Run yarn build.
5. Commit changes, and publish according to changeset.

Building icons

yarn build runs the svg script, and then the tsup script.

Script svg

svg uses the package svg-sprite to make the sprite ./symbols/kobber-icons.svg from all icons in src/assets/svgs folder.

svg-sprite uses ./svg-sprite-config.json to generate the sprite containing each icon as an svg symbol.

For each svg symbol, this config file:

• prefixes its id with kobber- (to avoid collisions with any other id in the html, including svg symbols in other sprites)
• ensures currentcolor is used as fill color

Script tsup

In ./tsup.config.ts, the sprite is used as input for making ./symbols/kobber-icons-lists.ts, the all icon components and their story files.

Generated files

All files in folders (chunks, react, symbols and web-components) are auto generated and should never be edited manually.