@sit-onyx/icons 0.1.0-alpha.0 → 0.1.0-alpha.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/icons",
   "description": "SVG icons for the onyx design system",
-  "version": "0.1.0-alpha.0",
+  "version": "0.1.0-alpha.2",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {
@@ -21,8 +21,8 @@
     "./*": "./src/assets/*"
   },
   "devDependencies": {
-    "svgo": "^3.2.0",
-    "tsx": "^4.7.1"
+    "svgo": "^3.3.2",
+    "tsx": "^4.15.2"
   },
   "scripts": {
     "optimize:check": "tsx ./src/check.ts",

package/src/assets/arrow-small-down.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M10.87 16.05 15 20.18V8.59h2v11.59l4.13-4.13 1.41 1.41L16 24l-6.54-6.54z" style="stroke-width:0"/></svg>

package/src/assets/arrow-small-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M21.13 16.54 17 12.41V24h-2V12.41l-4.13 4.13-1.41-1.41L16 8.59l6.54 6.54z" style="stroke-width:0"/></svg>

package/src/assets/car-electric.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="&amp;lt;Ebene&amp;gt;" viewBox="0 0 32 32"><path d="M28 17.95h2V25c0 1.65-1.35 3-3 3h-1c-1.65 0-3-1.35-3-3H9c0 1.65-1.35 3-3 3H5c-1.65 0-3-1.35-3-3v-7c0-1.13.39-2.16 1.02-3H2v-2h2.17l1.07-5.62C5.43 5.49 6.91 4 8.67 4h14.67c1.53 0 2.86 1.12 3.31 2.78l-1.93.52c-.21-.76-.77-1.3-1.38-1.3H8.67c-.72 0-1.35.74-1.45 1.67L6.21 13H13v2H7c-1.65 0-3 1.34-3 3v7c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-2h18v2c0 .55.45 1 1 1h1c.55 0 1-.45 1-1zM11 20v-2H7v2zm19-7v2h-4v1c0 1.65-1.34 3-3 3h-6v-2h-2v-2h2v-2h-2v-2h2V9h6c1.65 0 3 1.34 3 3v1zm-6-1c0-.55-.45-1-1-1h-4v6h4c.55 0 1-.45 1-1v-4.01Z" style="stroke-width:0"/></svg>

package/src/assets/circle-contrast.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M15.99 2C8.28 2 2 8.27 2 15.99s6.27 13.99 13.99 13.99 13.99-6.27 13.99-13.99S23.7 2 15.99 2m5.96 3.6c.76.44 1.47.96 2.12 1.55v17.66c-.65.59-1.35 1.11-2.12 1.55zm-2 21.69c-.63.22-1.29.39-1.96.51V4.18c.67.11 1.33.28 1.96.51zm6.11-17.77c1.2 1.87 1.91 4.08 1.91 6.47s-.71 4.6-1.91 6.47V9.53ZM4 15.99C4 9.38 9.38 4 15.99 4v23.97C9.38 27.97 4 22.59 4 15.98Z" style="stroke-width:0"/></svg>

package/src/assets/heptagon-cloud-lock.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M27.3 7.46 16 1.88 4.7 7.46l-2.78 12.5L9.72 30h12.55l7.8-10.04-2.78-12.5ZM21.3 28H10.71l-6.63-8.52L6.45 8.84 16 4.12l9.55 4.72 2.37 10.64L21.29 28Zm.81-14.43v-.74c0-1.81-1.48-3.29-3.29-3.29-.2 0-.4.02-.59.06a4.86 4.86 0 0 0-2.99-1.03c-2.4 0-4.41 1.72-4.86 3.99-.89.13-1.72.57-2.34 1.24-.75.81-1.12 1.92-1.03 3.03.18 2.02 1.99 3.61 4.11 3.61H14v.03c0 1.39 1.13 2.53 2.53 2.53h4.58c1.39 0 2.53-1.13 2.53-2.53v-4.58c0-1.04-.63-1.93-1.53-2.32m-2-.74v.53h-2.58v-.53c0-.71.58-1.29 1.29-1.29s1.29.58 1.29 1.29m-8.99 5.61c-1.09 0-2.02-.79-2.11-1.79-.05-.56.13-1.09.51-1.5s.89-.64 1.45-.64h1.33v-1a2.95 2.95 0 0 1 3.99-2.76c-.46.57-.75 1.28-.75 2.07v.74c-.9.39-1.53 1.28-1.53 2.32v2.55h-2.88Zm10.52 2.03c0 .29-.24.53-.53.53h-4.58c-.29 0-.53-.24-.53-.53v-4.58c0-.29.24-.53.53-.53h4.58c.29 0 .53.24.53.53zM20 18.14a1.14 1.14 0 1 1-2.279.001A1.14 1.14 0 0 1 20 18.14" style="stroke-width:0"/></svg>

package/src/assets/heptagon-cloud.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M20.27 22.33H11.2a4.2 4.2 0 0 1-4.2-4.2c0-2.01 1.42-3.7 3.32-4.11.54-2.5 2.78-4.36 5.42-4.36 1.95 0 3.74 1.03 4.73 2.67 2.56.11 4.54 2.26 4.54 5s-2.12 5-4.73 5Zm-9.07-6.4c-1.21 0-2.2.99-2.2 2.2s.99 2.2 2.2 2.2h9.07c1.51 0 2.73-1.35 2.73-3s-1.2-3-2.73-3l-1.04.03-.28-.61a3.52 3.52 0 0 0-3.22-2.08c-1.87 0-3.43 1.46-3.54 3.32l-.05.94zM22.27 30H9.72l-7.8-10.04L4.7 7.46 16 1.88l11.3 5.58 2.78 12.5L22.28 30ZM10.7 28h10.59l6.63-8.52-2.37-10.64L16 4.12 6.45 8.84 4.08 19.48 10.71 28Z" style="stroke-width:0"/></svg>

package/src/assets/heptagon-lock.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M27.3 7.46 16 1.88 4.7 7.46l-2.78 12.5L9.72 30h12.55l7.8-10.04-2.78-12.5ZM21.3 28H10.71l-6.63-8.52L6.45 8.84 16 4.12l9.55 4.72 2.37 10.64L21.29 28ZM20 14.04V11.6c0-2.21-1.79-4-4-4s-4 1.79-4 4v2.44a2.37 2.37 0 0 0-1.93 2.32v5.93c0 1.31 1.06 2.37 2.37 2.37h7.12c1.31 0 2.37-1.06 2.37-2.37v-5.93c0-1.16-.83-2.12-1.93-2.32M16 9.6c1.1 0 2 .9 2 2V14h-4v-2.4c0-1.1.9-2 2-2m3.93 12.7c0 .2-.17.37-.37.37h-7.12c-.2 0-.37-.17-.37-.37v-5.93c0-.2.17-.37.37-.37h7.12c.2 0 .37.17.37.37zm-2.43-2.97c0 .83-.67 1.5-1.5 1.5s-1.5-.67-1.5-1.5.67-1.5 1.5-1.5 1.5.67 1.5 1.5" style="stroke-width:0"/></svg>

package/src/assets/kubernetes-shield.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M29.15 17.19s-3.52-.85-5.78-1.98l-.45-.22-.45.22c-.9.45-2 .85-2.99 1.18-.03-.36-.1-.71-.23-1.03l4.98-3.97q.63.975 1.02 2.1l1.89-.65c-.33-.97-.79-1.87-1.34-2.7l2.06-1.64-1.25-1.56-2.06 1.65a11.8 11.8 0 0 0-7.54-3.64V2.32h-2v2.64c-2.96.25-5.6 1.6-7.53 3.64L5.41 6.95 4.16 8.51l2.06 1.65a11.7 11.7 0 0 0-1.98 6.53c0 .56.05 1.1.13 1.63l-2.58.59.45 1.95 2.57-.59c.88 2.73 2.73 5.03 5.14 6.48l-1.17 2.41 1.8.88 1.16-2.4c1.33.52 2.76.81 4.27.81v-2c-1.19 0-2.33-.23-3.39-.62l2.78-5.71c.2.04.41.06.62.06h.01c.79 8.47 6.45 9.72 6.71 9.77l.2.04.2-.04c.28-.06 6.8-1.48 6.8-11.78v-.79l-.77-.18Zm-13.23.18v.79c-.79-.04-1.42-.7-1.42-1.5s.68-1.51 1.51-1.51 1.51.68 1.51 1.51c0 .11-.03.22-.05.32-.47.13-.76.2-.77.2l-.77.18Zm7.06-7.54-4.97 3.97c-.3-.21-.64-.36-1-.47V6.96c2.3.24 4.4 1.27 5.97 2.87m-7.97-2.88v6.38c-.36.11-.7.26-1 .47L9.04 9.84a9.7 9.7 0 0 1 5.97-2.88Zm-8.77 9.72c0-1.94.58-3.75 1.56-5.27l4.97 3.96c-.14.34-.21.7-.24 1.08l-6.21 1.42c-.05-.39-.08-.78-.08-1.19m4.58 8.27a9.8 9.8 0 0 1-4.06-5.13l6.21-1.42c.17.3.38.58.63.82l-2.78 5.72Zm12.1 2.99c-.91-.29-4.73-1.94-4.99-8.99 1.12-.3 3.25-.92 4.99-1.72 1.74.8 3.86 1.42 4.99 1.72-.26 7.07-4.06 8.7-4.99 8.99m-.53-5.78 2.74-2.74 1.41 1.41-4.14 4.14-2.77-2.73 1.4-1.42 1.35 1.34Z"/></svg>

package/src/assets/new.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" data-name="&amp;lt;Ebene&amp;gt;" viewBox="0 0 32 32"><path d="M17 30h-2v-6h2zm6.78-4.81-2.83-2.83 1.41-1.41 2.83 2.83zm-15.56 0-1.41-1.41 2.83-2.83 1.41 1.41zM30 17h-6v-2h6zM8 17H2v-2h6zm14.36-5.95-1.41-1.41 2.83-2.83 1.41 1.41zm-12.72 0L6.81 8.22l1.41-1.41 2.83 2.83zM17 8h-2V2h2z" style="stroke-width:0"/></svg>

package/src/assets/print-dots.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M7 21.99H5v-7c0-.55.45-1 1-1h18c.55 0 1 .45 1 1h2c0-1.65-1.35-3-3-3h-1v-8H7v8H6c-1.65 0-3 1.35-3 3v9h4v4h7v-2H9v-4h5v-2H7zm2-16h12v6H9zm-2 12v-2h2v2zm16.02-1.98c-3.86 0-7 3.14-7 7s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7m0 12c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5m-4.02-6h2v2h-2zm3 0h2v2h-2zm5 0v2h-2v-2z" style="stroke-width:0"/></svg>

package/src/assets/print-list.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M8 18v-2h2v2zm21-8v20H16V14H7c-.55 0-1 .45-1 1v7h2v-2h6v2h-4v4h4v2H8v-4H4v-9c0-1.65 1.35-3 3-3h1V4h16v6zm-13 2v-2h6V6H10v6zm11 0h-9v16h9zm-2 7h-5v2h5zm0 4h-5v2h5zm0-8h-5v2h5z" style="stroke-width:0"/></svg>

package/src/assets/search-x.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="m28.71 27.29-8.13-8.13a9.97 9.97 0 0 0 2.42-6.5c0-5.51-4.49-10-10-10s-10 4.49-10 10 4.49 10 10 10c2.31 0 4.44-.8 6.13-2.12l8.16 8.16 1.41-1.41ZM5 12.66c0-4.41 3.59-8 8-8s8 3.59 8 8-3.59 8-8 8-8-3.59-8-8m12.44-3.19-3.03 3.03 3.03 3.03-1.41 1.41L13 13.91l-3.03 3.03-1.41-1.41 3.03-3.03-3.03-3.03 1.41-1.41L13 11.09l3.03-3.03z" style="stroke-width:0"/></svg>

package/src/assets/server-shield.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M6 16v-2h2v2zm6 0v-2h-2v2zm-7 2h9v2H4.83c-.46 0-.83.45-.83 1v4c0 .55.37 1 .83 1H14v2H4.83C3.27 28 2 26.65 2 25v-4c0-.78.29-1.49.76-2.03C2.29 18.44 2 17.76 2 17v-4c0-.77.3-1.47.78-2C2.3 10.47 2 9.77 2 9V5c0-1.65 1.35-3 3-3h18c1.65 0 3 1.35 3 3v4c0 .77-.3 1.47-.78 2 .48.53.78 1.23.78 2v1h-2v-1c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1M4 9c0 .55.45 1 1 1h18c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1zm4 15v-2H6v2zm4 0v-2h-2v2zM8 6H6v2h2zm4 0h-2v2h2zm18 11.41v.79c0 10.3-6.53 11.72-6.8 11.78l-.2.04-.2-.04c-.28-.06-6.8-1.48-6.8-11.78v-.79l.77-.18s3.52-.85 5.78-1.98l.45-.22.45.22c2.27 1.13 5.75 1.97 5.78 1.98zm-2.01 1.56c-1.12-.3-3.25-.92-4.99-1.72-1.74.8-3.86 1.42-4.99 1.72.26 7.05 4.07 8.7 4.99 8.99.93-.29 4.73-1.93 4.99-8.99m-6.87 1.87-1.4 1.42 2.77 2.73 4.14-4.14-1.41-1.41-2.74 2.74-1.35-1.34Z"/></svg>

package/src/assets/soccer.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16 2C8.28 2 2 8.28 2 16s6.28 14 14 14 14-6.28 14-14S23.72 2 16 2m1 2.04c4.51.37 8.31 3.25 10.03 7.23l-5.16 1.72L17 9.45zm3.57 10.48-1.74 5.37h-5.64l-1.74-5.37 4.57-3.32 4.57 3.32ZM15 4.04v5.41l-4.87 3.54-5.16-1.72C6.68 7.29 10.49 4.42 15 4.04M4 16c0-.98.12-1.92.34-2.83l5.11 1.7 1.78 5.49-3.92 3.92A11.96 11.96 0 0 1 4 16.01Zm12 12c-2.69 0-5.18-.89-7.19-2.4l3.72-3.72h6.94l3.72 3.72c-2 1.5-4.49 2.4-7.19 2.4m8.69-3.73-3.92-3.92 1.78-5.49 5.11-1.7a11.96 11.96 0 0 1-2.97 11.1Z" style="stroke-width:0"/></svg>

package/src/metadata.ts

@@ -1,4 +1,4 @@
-import { IconMetadata, groupIconsByCategory } from "./utils.js";
+import { groupIconsByCategory, type IconMetadata } from "./utils.js";
 
 /**
  * Metadata for all available onyx icons.
@@ -76,6 +76,12 @@ export const ICON_METADATA = {
   "arrow-up": {
     category: "Arrows",
   },
+  "arrow-small-down": {
+    category: "Arrows",
+  },
+  "arrow-small-up": {
+    category: "Arrows",
+  },
   "arrows-sort": {
     category: "Arrows",
   },
@@ -1780,6 +1786,42 @@ export const ICON_METADATA = {
   "server-lock": {
     category: "Network & Infrastructure",
   },
+  new: {
+    category: "Various",
+  },
+  "server-shield": {
+    category: "Network & Infrastructure",
+  },
+  "kubernetes-shield": {
+    category: "Software & Services",
+  },
+  "car-electric": {
+    category: "Car Parts",
+  },
+  "circle-contrast": {
+    category: "Action & Interface",
+  },
+  "search-x": {
+    category: "Action & Interface",
+  },
+  "print-dots": {
+    category: "Devices & Electronics",
+  },
+  "print-list": {
+    category: "Devices & Electronics",
+  },
+  soccer: {
+    category: "Objects",
+  },
+  "heptagon-cloud-lock": {
+    category: "Software & Services",
+  },
+  "heptagon-cloud": {
+    category: "Software & Services",
+  },
+  "heptagon-lock": {
+    category: "Software & Services",
+  },
 } as const satisfies Record<string, IconMetadata>;
 
 /**
@@ -1787,3 +1829,29 @@ export const ICON_METADATA = {
  * Categories and icons will be sorted alphabetically.
  */
 export const ICON_CATEGORIES = groupIconsByCategory(ICON_METADATA);
+
+/**
+ * Transform an icon name to its corresponding JavaScript import name.
+ *
+ * @example
+ * ```ts
+ * "bell-disabled" => "bellDisabled"
+ * // e.g. used as 'import bellDisabled from "@sit-onyx/icons/bell-disabled.svg?raw"'
+ * ```
+ */
+export const getIconImportName = (iconName: string) => {
+  return iconName
+    .split("-")
+    .map((word, index) => {
+      if (index === 0) return word;
+      return capitalize(word);
+    })
+    .join("");
+};
+
+/**
+ * Capitalizes the first character of the given string.
+ */
+const capitalize = (value: string) => {
+  return value.charAt(0).toUpperCase() + value.slice(1);
+};