# @dataforsyningen/designsystem > Common design system for Klimadatastyrelsen with CSS, icons, UI components, and logo images. Latest version **8.9.1** (published 2025-05-28) · MIT license · 0 weekly downloads ## Install ```sh npm install @dataforsyningen/designsystem pnpm add @dataforsyningen/designsystem yarn add @dataforsyningen/designsystem bun add @dataforsyningen/designsystem ``` ## Health **Score 30/100 (F)** — status: maintenance-mode. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types. Negative: stale; low maintenance score. ## Facts | | | |---|---| | Version | 8.9.1 | | Published | 2025-05-28 | | First published | 2023-11-28 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 0 | | Unpacked size | 4.7 MB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Klimadatastyrelsen | | Maintainers | dataforsyningen-user, iamfrank | | Keywords | Klimadatastyrelsen, designsystem, icons, stylesheets, logos, UI components | ## Links - npm: https://www.npmjs.com/package/@dataforsyningen/designsystem - npm.io page: https://npm.io/package/@dataforsyningen/designsystem ## Alternatives - [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads - [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads - [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads - [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads - [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads ## Recent versions - 8.9.1 (latest) — 2025-05-28 - 8.9.0 — 2025-05-28 - 8.8.1 — 2025-04-09 - 8.8.0 — 2025-04-02 - 8.7.1 — 2025-04-01 - 8.7.0 — 2025-03-20 - 8.6.0 — 2025-01-14 - 8.5.1 — 2025-01-02 - 8.5.0 — 2024-12-05 - 8.4.0 — 2024-12-04 - 8.3.1 — 2024-12-04 - 8.3.0 — 2024-11-20 - 8.2.1 — 2024-11-20 - 8.2.0 — 2024-11-19 - 8.1.3 — 2024-11-19 - … 65 more at https://npm.io/package/@dataforsyningen/designsystem/versions ## README # Klimadatastyrelsen Designsystem Common design system for Klimadatastyrelsen with CSS, icons, UI components, and logo images. ## Read the documentation Documentation is available at [sdfidk.github.io/designsystem/](https://sdfidk.github.io/designsystem/) You can also build and read the docs locally. 1. Clone this repo. 2. Navigate to folder `designsystem` or `node_modules/@dataforsyningen/designsystem` 3. Open file `index.html` in a browser. ## Build the project yourself Assuming you have **Node.js** and NPM installed: First, install dependencies: ``` npm install ``` Then, run this script to build the project: ``` npm run build ``` New files will appear in the `assets` folder. ## How to use in your project ### Simple setup / buildless #### Stylesheets You can load the styles directly from CDN. ```html ... ... ``` Or you can find the designsystem stylesheet in [assets/designsystem.css](./assets/designsystem.css). Copy it to your project and include the stylesheet by add a reference in the `head` section of your HTML pages. ```html ... ... ``` #### Icons (SVG) You can find all designsystem icons in [assets/icons](./assets/icons). You can copy and use them individually or use the entire icon set as a single SVG file: [assets/icons.svg](./assets/icons.svg) When using the single SVG, you just add an `svg` element to your markup and display your icon of choice with `use`. Here is an example where we display the `notification` icon: ```html ``` Icons are also available via CDN. **Note that custom styling is not available this way.** ```html

``` #### Javascript You can find designsystem Javascript in [assets/designsystem.js](./assets/designsystem.js) or get it from CDN. Copy it to your project and include the script by adding a reference in the `body` section of your HTML pages. Here is an example where we import all of designsystem Javascript: ```html ... ``` Here is an example where we import the `Tabs` component from designsystem Javascript: ```html ... ``` Here are the same examples using Javascript hosted on our CDN: ```html ``` ### With NPM ```bash npm i @dataforsyningen/designsystem --save ``` ### With esbuild (Javascript/NPM) Assuming you installed **@dataforsyningen/designsystem** with NPM, you can import various parts of designsystem into your esbuild-project. #### Stylesheets Include and build stylesheets in your esbuild script like this: ``` require('esbuild').buildSync({ entryPoints: ['@dataforsyningen/designsystem/designsystem.css'], bundle: true, outfile: 'mystyles.css', }) ``` #### Icons (SVG) Esbuild needs to support loading SVG files. You can setup the `file` loader in your esbuild script like this: ``` require('esbuild').buildSync({ ... loader: { '.svg': 'file' }, ... }) ``` Then you can import a reference to the svg sprites file and use them in your .js files. ``` import svgIcon from '@dataforsyningen/designsystem/icons.svg' // Using the **notification** icon const templateString = ` ` ``` #### Javascript Import designsystem Javascript like you would import any other script. Example with ShowToast: ``` import { showToast } from '@dataforsyningen/designsystem' showToast('Hello! I am a toast.') ``` --- _Source: https://npm.io/package/@dataforsyningen/designsystem · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._