@aasen/toolbox-cli

Bruk av @aasen/toolbox-cli

Toolbox har fått et kommandolinjeverktøy; toolbox 🥳 for bruk i terminalen eller scripts.

Forutsetninger

Node >= 18.10 installert

Installasjon

npm install -g @aasen/toolbox-cli

Tilgjengelige kommandoer

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

toolbox 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.

toolbox.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 */
    }
  }
}

toolbox svg sprite

Komponentbibliotekene i Toolbox 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«:

<div id="toolbox-icons-sprite"></div>

Når brukes denne kommandoen? Hver gang du legger til eller tar bort en SVG.

👮 Lisens

Toolbox CLI er distribuert under MIT-lisens for åpen kildekode.