@oslokommune/oslo-designsystem-cli NPM

Bruk av @oslokommune/oslo-designsystem-cli

Oslo designsystem har fått et kommandolinjeverktøy; ods 🥳 som bruk i terminalen eller scripts.

Forutsetninger

Node >= 12.22.12 installert

Installasjon

npm install -g @oslokommune/oslo-designsystem-cli

Tilgjengelige kommandoer

ods gir deg en oversikt over kommandoene og options.
ods init initierer designsystemet for bruk i din applikasjon. Lager også en ods.config.json fil basert på valg som tas i oppsettet.
ods svg sprite generer svg sprites basert på ods.config.json.

ods init

Denne kommandoen initierer designsystemet.

Fordeler

Oppretter konfig-filen for deg.
Gir deg muligheten til å installere andre pakker i designsystemet.
Legger til grunnleggende SVG-ikoner i appen din, om du ønsker.
Gir deg personaliserte tips basert på dine svar og package.json i applikasjonen din.

ods.config.json kan eksempelvis se slik ut:

{
  "svgsprite": {
    "files": [                          /* SVG-filer i svgsprite */
      "../assets/src/icons/check.svg",
      "../assets/src/icons/24h.svg",
      "../assets/src/icons/share.svg"
    ],
    "output": {
      "fileType": "html",               /* html|svg */
      "filePath": "./index.html"        /* sti til destinasjonsfilen */
    }
  }
}

ods svg sprite

Komponentbibliotekene i Oslo designsystem forutsetter at en såkalt SVG Sprite eller SVG Symbols er tilgjengelig på siden. Det kan du lese mer om her: Multi-Colored SVG Symbol Icons with CSS Variables.

Denne kommandoen genererer en slik svgsprite for deg. Den trenger at designsystemet er initiert.

Kommandoen er avhengig av følgende verdier i konfig:

svgsprite.files --> Array med stier til SVG ikoner.
svgsprite.output.fileType --> Streng bestående av en av disse verdiene:
- html - svgsprite inlines i et element i en html-fil (se under).
- svg - svgsprite skrives i en SVG-fil.
svgsprite.output.filePath --> Streng bestående av sti til output-filen.

MERK! Om du velger å inline i en HTML-fil skal du legge til dette elementet«: