feat: initial import of all icons from Figma (#1)

.gitignore

@@ -0,0 +1,4 @@
+/node_modules
+/dist
+
+.FIGMA_TOKEN

README.md

@@ -1,2 +1,34 @@
-# icons
-The icon set for WARP
+# WARP icons
+The icon set for WARP, imported from (Figma project)[!https://www.figma.com/file/yEx16ew6S0Xgd579dN4hsM/Warp---Icons?type=design&node-id=150-113&mode=design&t=TRtIuPlsDoYlbuqd-0].
+
+## Development
+
+### Updating the icons
+Icons should never be added or edited manually in this repository, as the source of truth is in (Figma)[!https://www.figma.com/file/yEx16ew6S0Xgd579dN4hsM/Warp---Icons?type=design&node-id=150-113&mode=design&t=TRtIuPlsDoYlbuqd-0].
+
+#### Figma access token
+If you are running the import script for the first time, it will prompt your for a Figma access token. The token is is required to access Figma's API. It can be generated on your Figma account settings page.
+
+The import script may store the token to a local file, so you won't have to supply the token again on subsequent runs.
+
+### Import script
+To update the icons, run the following script. If it has a valid Figma access token (see above), it will proceed to download all the icons as SVG files.
+
+```bash
+./scripts/import.js
+```
+
+or 
+
+```bash
+pnpm run import
+```
+
+### Local preview
+You can open a local preview of the icons. Use this to verify that the icons looks as they should. Run the following command.
+
+```bash
+pnpm run preview
+```
+
+

icon-descriptions.yml

@@ -0,0 +1,228 @@
+---
+ActiveAds: Ark med bilde og overskrift med fremhevet hakemerke
+Ads: Ark med bilde og overskrift
+AirCon: Liten luftkjøler
+Airplane: Fly
+AirplaneHotel: Fly og hotell
+Alert: Sirkel med utropstegn
+AlertError: Rød åttekant med hvitt utropstegn
+AlertInfo: Blå sirkel med bokstaven I
+AlertSuccess: Grønn sirkel med hakemerke
+AlertWarning: Gul varseltrekant med utropstegn
+AllWheelDrive:  Firehjuls drivverk
+Archway: Buegang
+Attachment: Binders
+Automatic: Girkasse automat
+BackWheelDrive: Bakhjuls drivverk
+Bag: Håndveske
+Bank: En bank med tre søyler
+BankIdent: Skjold med hakemerke
+BatteryEmpty: Tomt batteri
+BatteryFull: Fullt batteri
+BatteryHalfFull: Halvfullt batteri
+Beach: Strandparasoll
+Bed: Seng
+Bell: Bjelle
+Bin: Søppeldunk
+BoatLength: Båt med piler i begge retninger
+Bolt: Lyn
+Bookmark: Bokmerke
+Building: Boligblokk
+Bulb: Lyspære
+Bulldozer: Bulldoser
+Burger: Tre horisontale streker
+Bus: Buss
+Cabin: Feriehus
+CabinHut: Hytte med hage
+Calculator: Kalkulator
+Calendar: Kalender
+Camera: Kamera
+Camping: Campingvogn
+Car: Bil
+CarKey: Bil og nøkkel
+CarRent: Bil og klokke
+CarService: Bil og stjerne
+CarSubscription: Bil og sjekkliste
+Cart: Handlevogn
+Chainsaw: Motorsag
+Charger: Kabel
+Charter: Koffert
+ChatRequest: Snakkeboble ved siden av en person
+ChatSupport: Snakkebobler med smilefjes
+Check: Hakemerke
+Checklist: Sjekkliste
+Chevron-down: Pil ned
+Chevron-left: Pil venstre
+Chevron-right: Pil høyre
+Chevron-up: Pil opp
+ChevronDouble-left: Dobbel pil venstre
+ChevronDouble-right: Dobbel pil høyre
+CirclePlus: Sirkel med pluss
+CircleUser: Sirkel med ansikt
+Clock: Klokke
+Close: Kryss
+Cog: Tannhjul
+ColorPalette: Fargekart
+CottagePlot: Et stiplet kvadrat med en fremhevet hytte
+CreditCard: To kredittkort
+Cursor: Musepeker over en sirkel
+Dating: To hjerter
+Diner: Kniv og gaffel
+Discount: Prosenttegn
+Dislike: Tommel ned
+Door: Dør
+Dots: Tre prikker
+Download: Pil ned til harddisk
+Drink: Cocktail glass
+Economy: En seddel og to mynter
+Edit: Blyant
+Energy: Kabel med støpsel og planteblad
+Engine: Motor
+EngineBelt: Viftereim
+Exchange: Sirkel med to piler pekende i hver sin retning
+Expand: To diagonale piler pekende i hver sin retning
+EyeOff: Overstreket øye
+EyeOn: Øye
+Facebook: Facebook logo
+Farm: En låve med en silo ved siden av og to fugler på himmelen
+Favorite: Hjerte
+Feedback: Snakkebobler
+File: Ark med brettet kant i øvre høyre hjørne og en sirkel med plusstegn
+Filter: To horisontale skyveknapper over hverandre
+Fireplace: Peis
+Fishing: Fiskekrok
+Fitness: Treningsvekt
+FrontWheelDrive: Forhjuls drivverk
+GasDiesel: Dieselpumpe
+GasFuel: Bensinpumpe
+GasHybrid: Rundt støpsel med dråpe
+GraphLine: Linjegraf
+GraphPie: Kakediagram
+Grid: Fire kvadrater som danner et større kvadrat
+Grill: Kulegrill
+Hiking: Skogssti
+History: Roterende pil til venstre med en klokke
+Hotel: Hotell
+HouseCabin: Hytte
+HouseModern: Funkishus
+HousePerson: Hus med person
+Image: Ark med brettet kant i øvre høyre hjørne samt sol og fjell
+Info: Sirkel med bokstaven I
+Instagram: Instagram logo
+Job: Dokumentmappe
+Keys: To nøkler på nøkkelring
+Krone: Sirkel med KR
+Landscape: Sol og fjell
+Laundry: Vaskemaskin
+Layers: Tre kvadrater som flyter inn i hverandre
+Leaf: Planteblad
+Lift: Heis
+Like: Tommel opp
+Link: Lenke
+LinkExternal: Kvadrat med pil opp mot høyre
+List: To rektangler under hverandre
+LockShield: Skjold med hengelås
+Logout: Stående rektangel med pil ut til høyre
+Mail: Konvolutt
+Mailbox: Postkasse med et flagg som signaliserer ny post
+Manual: Girkasse manuell
+Map: Kart med kartnål
+Market: Sofa
+Measure: Stiplet kvadrat med målepiler
+Message: Snakkeboble
+Minus: Minus
+Motorcycle: Motorsykkel
+Mountain: Fjell med flagg på toppen
+Nettbil: To sirkler med en halvsirkel over
+NewAd: Ark med bilde, overskrift og fremhevet plusstegn
+NoSmoking: Overstreket sigarett
+NorwegianMotor: Sirkel med NBF
+PaintRoller: Malingsrulle i aksjon
+Parking: Sirkel med bokstaven P
+Paw: Kattepote
+Phone: Smarttelefon
+PhoneScratched: Smarttelefon med tre riper
+PhoneUsed: Smarttelefon med tre riper i glasset
+Pin: Kartnål
+PlaneTicket: Hånd med flybillett
+Play: Sirkel med en trekant som peker til høyre
+Playhouse: Klatrestativ
+Plots: Stiplet kvadrat med et fremhevet mindre kvadrat
+Plus: Pluss
+ProductBlink: Rakett
+ProductBump: Bilde med tekst som fremheves av pil opp
+ProductCarousel: Fremhevet stående rektangel med to rektangler i bakgrunnen
+ProductHighlightListing: Tekst med fremhevet bilde
+ProductNabolagsprofil: Hus med fremhevet kartnål
+ProductNoAds: Støyende megafon
+ProductStarred: Tre stjerner med tekst under
+ProductTop: Pil mot bilde med tekst under
+Propeller: Snurrende propell
+Question: Sirkel med spørsmålstegn
+Rating-empty: Tom blå stjerne
+Rating-full: Full blå stjerne
+Rating-half: Halvfull blå stjerne
+RealEstate: Hus med hage
+Refresh: Roterende pil
+RoomService: Hanskekledd hånd og serveringsbrett med kuppel
+Sailboat: To fugler og seilbåt på vannet
+Sailing: Seilbåt på vannet
+Sauna: Hus med varme
+ScrollUp: Pil opp
+Search: Forstørrelsesglass
+SearchFavorites: Forstørrelsesglass med hjerte
+Seat: Flysete
+Send: Papirfly
+Service: Roterende pil med skiftenøkkel
+Share: Kvadrat med pil ut til høyre
+Shower: Rennende dusjhode
+SmileyGood: Fornøyd smil
+SmileyHappy: Glad smilefjes
+SmileyNeutral: Uttrykksløst fjes
+SmileySad: Trist fjes
+Sorting: Tekstliste med pil ned på siden
+Spa: Vannlilje
+Speedometer: Speedometer
+Stairs: Trappetrinn med diagonal pil opp
+StarCheck: Stjerne med fremhevet hakemerke
+Store: Butikk
+Stove: Koketopp med tre plater
+Suitcase: Stresskoffert
+Support: Person med hodesett
+Swimming: Person som svømmer
+TV: Flatskjerm
+Tag: Merkelapp
+Theater: Kostymemaske med smilefjes
+ThreeSixty: Roterende pil til høyre med et hus
+TorgetBrowser: Nettleservindu med t-skjorte og fremhevet musepeker
+TorgetDelivery: Hånd som holder en liten eske
+TorgetHeadset: Hodetelefoner
+TorgetLamp: Gulvlampe
+TorgetMixer: Kjøkkenmaskin
+TorgetShipping: Lastebil i fart
+TorgetShopping: Handlevogn
+TorgetUsers: Tre personer
+TorgetVerified: Nettleser med fremhevet skjold nederst til høyre
+TownHouse: To boligblokker
+Tractor: Traktor
+Triangle: Varseltrekant
+Twitter: Twitter logo
+Up: Kvadrat med pil opp
+Upload: Pil opp fra harddisk
+User: Person
+Users: To personer
+Van: Bobil
+Verification: Blått skjold med hakemerke
+Wallet: Lommebok
+Warranty: Rosett med hakemerke
+Wheelchair: Rullestol
+Wifi: WiFi symbol, tre bølger over en sirkel
+Woods: To grantrær
+Youtube: YouTube logo
+BuildingPlot: Et stiplet kvadrat med et fremhevet hus
+Skyscraper: To boligblokker med en sky over
+OfficeDesk: En kontorpult med en dataskjerm
+TableSortUp: En pil som peker opp
+TableSortDown: En pil som peker ned
+TableInfo: En sirkel med bokstaven I
+BankId: BankId logo

index.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
+    <meta name="description" content="All WARP icons" />
+    <link href="https://assets.finn.no/pkg/@warp-ds/css/v1/tokens/finn-no.css" rel="stylesheet" />
+    <link href="https://assets.finn.no/pkg/@warp-ds/css/v1/resets.css" rel="stylesheet" />
+    <style>
+      html {
+        font-size: 62.5%;
+        margin: 0;
+      }
+      .max-w-screen-xl {
+        max-width: 1280px;
+      }
+    </style>
+    <script type="module" src="./main.js"></script>
+  </head>
+  <body class="s-bg-active">
+    <div class="s-bg border-b s-border">
+      <div class="max-w-screen-xl mx-auto px-32 py-16 flex items-center justify-between">
+        <h1 class="h1 antialiased mb-0">WARP Icons</h1>
+        <a class="s-text-subtle" href="https://github.com/warp-ds/icons">
+          <svg class="h-24 w-24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><title>GitHub repository</title><path d="M10 0a10 10 0 0 0-3.16 19.49c.5.1.68-.22.68-.48l-.01-1.7c-2.78.6-3.37-1.34-3.37-1.34-.46-1.16-1.11-1.47-1.11-1.47-.9-.62.07-.6.07-.6 1 .07 1.53 1.03 1.53 1.03.9 1.52 2.34 1.08 2.91.83.1-.65.35-1.09.63-1.34-2.22-.25-4.55-1.11-4.55-4.94 0-1.1.39-1.99 1.03-2.69a3.6 3.6 0 0 1 .1-2.64s.84-.27 2.75 1.02a9.58 9.58 0 0 1 5 0c1.91-1.3 2.75-1.02 2.75-1.02.55 1.37.2 2.4.1 2.64.64.7 1.03 1.6 1.03 2.69 0 3.84-2.34 4.68-4.57 4.93.36.31.68.92.68 1.85l-.01 2.75c0 .26.18.58.69.48A10 10 0 0 0 10 0"></path></svg>
+        </a>
+      </div>
+    </div>
+
+    <main class="max-w-screen-xl mx-auto px-32">
+      {% block content %}
+        {% for size, icons in iconsBySize %}
+          <section class="my-64">
+            <h2 class="h3 antialiased mb-16">{{size}}</h2>
+            <div class="grid gap-32 s-bg py-32 px-16 rounded-8 justify-center text-center" style="grid-template-columns: repeat(auto-fill, 128px)">
+                {% for icon in icons %}
+                  <div class="flex flex-col items-center">
+                    {{icon.svg | safe }}
+                    <div class="s-text-subtle text-16 mt-8 font-bold antialiased">{{ icon.name }}</div>
+                  </div>
+                {% endfor %}
+            </div>
+          </section>
+        {% endfor %}
+      {% endblock %}
+    </main>
+  </body>
+</html>    

index.js

@@ -0,0 +1,3 @@
+import path from "path";
+export const basedir = path.dirname(new URL(import.meta.url).pathname);
+export const iconsPath = path.join(basedir, "dist");

main.js

@@ -0,0 +1 @@
+import 'uno.css'

package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@warp-ds/icons",
+  "type": "module",
+  "version": "0.0.1",
+  "description": "WARP's icon set",
+  "main": "index.js",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": "./index.js"
+  },
+  "scripts": {
+    "import": "node ./scripts/import.js",
+    "build": "node ./scripts/build.js",
+    "render": "node preview/render.js",
+    "dev": "vite",
+    "vite:build": "vite build",
+    "preview": "pnpm run build && vite build && vite preview"
+  },
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "@sindresorhus/slugify": "^2.1.0",
+    "@warp-ds/uno": "^1.0.0",
+    "camelcase": "^7.0.0",
+    "chalk": "^5.0.1",
+    "esbuild": "^0.14.42",
+    "fs-extra": "^10.1.0",
+    "glob": "^8.0.3",
+    "happy-dom": "^6.0.4",
+    "js-yaml": "^4.1.0",
+    "jsdom": "^16.5.3",
+    "nanoid": "^4.0.0",
+    "node-fetch": "^3.2.9",
+    "nunjucks": "^3.2.2",
+    "ora": "^6.1.2",
+    "prompts": "^2.4.0",
+    "rimraf": "^3.0.2",
+    "svgo": "^3.0.0",
+    "unocss": "^0.55.2",
+    "vite": "^4.4.9",
+    "vite-plugin-nunjucks": "^0.1.10"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}