Punkt har fått et kommandolinjeverktøy; punkt
🥳 for bruk i
terminalen eller scripts.
Node >= 18.19.0 installert
npm install -g @oslokommune/punkt-cli
-
punkt
gir deg en oversikt over kommandoene og options. -
punkt init
initierer designsystemet for bruk i din applikasjon. Lager også enpkt.config.json
fil basert på valg som tas i oppsettet. -
punkt svg sprite
generer svg sprites basert påpunkt.config.json
.
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.
punkt.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 */
}
}
}
Komponentbibliotekene i Punkt 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«:
<div id="pkt-icons-sprite"></div>
Når brukes denne kommandoen? Hver gang du legger til eller tar bort en SVG.
Hvis du har importert inn alert-information kan du nå ta den i bruk slik:
<div class="pkt-alert">
<span class="pkt-icon pkt-alert__icon">
<svg viewBox="0 0 32 32" aria-hidden="true">
<use href="#alert-information"></use>
</svg>
</span>
<div class="pkt-alert__text">Bruk dette tekstfeltet til å skrive en kort varsling.</div>
</div>
Punkt bruker Semantic Versioning 2.0.0 for versjonering av pakkene.
Punkt
er distribuert under MIT-lisens for åpen kildekode.