@sit-onyx/icons 0.0.0 → 0.1.0-alpha.1

package/package.json

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

package/src/assets/chevron-down-up.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="m22.29 18.83 1.41 1.41-7.71 7.71-7.71-7.71 1.41-1.41 6.29 6.29 6.29-6.29ZM16 6.87l6.29 6.29 1.41-1.41-7.71-7.71-7.71 7.71 1.41 1.41 6.29-6.29Z"/></svg>

package/src/assets/kubernetes-lock.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M16 20.18c1.93 0 3.51-1.57 3.51-3.51 0-.46-.1-.9-.26-1.31l4.96-3.95c.13.2.27.39.39.61l1.76-.95c-.17-.32-.38-.61-.57-.9l2.08-1.66-1.25-1.56-2.06 1.65a11.7 11.7 0 0 0-7.54-3.61V2.33h-2v2.64c-2.96.25-5.6 1.6-7.53 3.64L5.42 6.96 4.17 8.52l2.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.06Zm0-2c-.83 0-1.51-.68-1.51-1.51s.68-1.51 1.51-1.51 1.51.68 1.51 1.51-.68 1.51-1.51 1.51m6.97-8.34L18 13.81c-.3-.21-.64-.36-1-.47V6.98c2.28.23 4.39 1.25 5.97 2.86M15 6.96v6.38c-.36.11-.7.26-1 .47L9.03 9.85A9.7 9.7 0 0 1 15 6.97Zm-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.72ZM28 18.88v-1.04c0-2.1-1.71-3.8-3.8-3.8h-.4c-2.09 0-3.8 1.7-3.8 3.8v1.04c-1.16.4-2 1.45-2 2.69v5.6c0 1.58 1.35 2.87 3 2.87h6c1.65 0 3-1.29 3-2.87v-5.6c0-1.24-.84-2.29-2-2.69m-6-1.04c0-.99.81-1.8 1.8-1.8h.4c.99 0 1.8.81 1.8 1.8v.87h-4zm6 9.33c0 .48-.45.87-1 .87h-6c-.55 0-1-.39-1-.87v-5.6c0-.48.45-.87 1-.87h6c.55 0 1 .39 1 .87zm-2-2.8c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2"/></svg>

package/src/assets/plus-minus.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M24 11v2h-7v7h-2v-7H8v-2h7V4h2v7zM8 28h16v-2H8z"/></svg>

package/src/assets/server-lock.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-4 8v-2H6v2zm4 0v-2h-2v2zm3-6h1v2H5.17C4.53 20 4 20.45 4 21v4c0 .55.52 1 1.17 1H16v2H5.17C3.42 28 2 26.65 2 25v-4c0-.76.31-1.45.8-1.97C2.31 18.5 2 17.79 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 1.65-1.35 3-3 3H5c-.55 0-1 .45-1 1v4c0 .55.45 1 1 1zM4 9c0 .55.45 1 1 1h18c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1H5c-.55 0-1 .45-1 1zm4-3H6v2h2zm4 0h-2v2h2zm18 15.53v5.6c0 1.58-1.35 2.87-3 2.87h-6c-1.65 0-3-1.29-3-2.87v-5.6c0-1.24.84-2.29 2-2.69V17.8c0-2.1 1.71-3.8 3.8-3.8h.4c2.09 0 3.8 1.7 3.8 3.8v1.04c1.16.4 2 1.45 2 2.69m-8-2.87h4v-.87c0-.99-.81-1.8-1.8-1.8h-.4c-.99 0-1.8.81-1.8 1.8zm6 2.87c0-.48-.45-.87-1-.87h-6c-.55 0-1 .39-1 .87v5.6c0 .48.45.87 1 .87h6c.55 0 1-.39 1-.87zm-4 .8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"/></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.
@@ -1768,6 +1768,18 @@ export const ICON_METADATA = {
   "zoom-out": {
     category: "Action & Interface",
   },
+  "chevron-down-up": {
+    category: "Arrows",
+  },
+  "kubernetes-lock": {
+    category: "Software & Services",
+  },
+  "plus-minus": {
+    category: "Essentials",
+  },
+  "server-lock": {
+    category: "Network & Infrastructure",
+  },
 } as const satisfies Record<string, IconMetadata>;
 
 /**
@@ -1775,3 +1787,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);
+};