@lukso/web-components 1.3.1 → 1.4.0

package/src/components/lukso-icon/icons/profile-restore.ts

@@ -0,0 +1,50 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const profileRestore = (options: IconOptions) => {
+  return html`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap({
+      width: `${options.width}px`,
+      height: `${options.height}px`,
+    })}
+  >
+    <path
+      d="M3.84377 10.6109L2.26123 9.28296"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M4 13H2"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M6 10V8"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M18.25 6C18.25 8.34721 16.3472 10.25 14 10.25C11.6528 10.25 9.75 8.34721 9.75 6C9.75 3.65279 11.6528 1.75 14 1.75C16.3472 1.75 18.25 3.65279 18.25 6Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+    />
+    <path
+      d="M4.75 18.6667C4.75 16.8725 6.09998 15.4016 8.10179 14.3324C10.0797 13.2759 12.4587 12.75 14 12.75C15.5413 12.75 17.9203 13.2759 19.8982 14.3324C21.9 15.4016 23.25 16.8725 23.25 18.6667V21.25H4.75V18.6667Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/profile.ts

@@ -0,0 +1,29 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const profile = (options: IconOptions) => {
+  return html`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap({
+      width: `${options.width}px`,
+      height: `${options.height}px`,
+    })}
+  >
+    <path
+      d="M16.25 6C16.25 8.34721 14.3472 10.25 12 10.25C9.65279 10.25 7.75 8.34721 7.75 6C7.75 3.65279 9.65279 1.75 12 1.75C14.3472 1.75 16.25 3.65279 16.25 6Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+    />
+    <path
+      d="M2.75 18.6667C2.75 16.8725 4.09998 15.4016 6.10179 14.3324C8.07966 13.2759 10.4587 12.75 12 12.75C13.5413 12.75 15.9203 13.2759 17.8982 14.3324C19.9 15.4016 21.25 16.8725 21.25 18.6667V21.25H2.75V18.6667Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/qr-code.ts

@@ -0,0 +1,122 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const qrCode = (options: IconOptions) => {
+  return html`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap({
+      width: `${options.width}px`,
+      height: `${options.height}px`,
+    })}
+  >
+    <path
+      d="M4 8V6C4 4.89543 4.89543 4 6 4H8"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+    />
+    <path
+      d="M4 16V18C4 19.1046 4.89543 20 6 20H8"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+    />
+    <path
+      d="M16 4L18 4C19.1046 4 20 4.89543 20 6L20 8"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+    />
+    <path
+      d="M16 20L18 20C19.1046 20 20 19.1046 20 18L20 16"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+    />
+    <mask id="path-5-inside-1_52_1474" fill="var(--${options.secondaryColor})">
+      <rect x="7" y="7" width="4" height="4" rx="1" />
+    </mask>
+    <rect
+      x="7"
+      y="7"
+      width="4"
+      height="4"
+      rx="1"
+      stroke="var(--${options.color})"
+      stroke-width="3"
+      mask="url(#path-5-inside-1_52_1474)"
+    />
+    <mask id="path-6-inside-2_52_1474" fill="var(--${options.secondaryColor})">
+      <rect x="7" y="13" width="4" height="4" rx="1" />
+    </mask>
+    <rect
+      x="7"
+      y="13"
+      width="4"
+      height="4"
+      rx="1"
+      stroke="var(--${options.color})"
+      stroke-width="3"
+      mask="url(#path-6-inside-2_52_1474)"
+    />
+    <rect
+      x="13"
+      y="13"
+      width="1"
+      height="1"
+      rx="0.5"
+      fill="var(--${options.color})"
+    />
+    <rect
+      x="16"
+      y="13"
+      width="1"
+      height="1"
+      rx="0.5"
+      fill="var(--${options.color})"
+    />
+    <rect
+      x="16"
+      y="16"
+      width="1"
+      height="1"
+      rx="0.5"
+      fill="var(--${options.color})"
+    />
+    <rect
+      x="13"
+      y="16"
+      width="1"
+      height="1"
+      rx="0.5"
+      fill="var(--${options.color})"
+    />
+    <rect
+      x="14.5"
+      y="14.5"
+      width="1"
+      height="1"
+      rx="0.5"
+      fill="var(--${options.color})"
+    />
+    <mask id="path-12-inside-3_52_1474" fill="var(--${options.secondaryColor})">
+      <rect x="13" y="7" width="4" height="4" rx="1" />
+    </mask>
+    <rect
+      x="13"
+      y="7"
+      width="4"
+      height="4"
+      rx="1"
+      stroke="var(--${options.color})"
+      stroke-width="3"
+      mask="url(#path-12-inside-3_52_1474)"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/relayer.ts

@@ -0,0 +1,40 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const relayer = (options: IconOptions) => {
+  return html`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap({
+      width: `${options.width}px`,
+      height: `${options.height}px`,
+    })}
+  >
+    <path
+      d="M13.9999 14C13.9999 12.1776 14 10 14 10H10"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M8.99993 19C8.99993 17.1776 9 15 9 15H5"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M18.9999 9C18.9999 7.17755 19 5 19 5H15"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/reload.ts

@@ -0,0 +1,32 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const reload = (options: IconOptions) => {
+  return html`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap({
+      width: `${options.width}px`,
+      height: `${options.height}px`,
+    })}
+  >
+    <path
+      d="M17.8336 6.16637C19.1833 7.51601 20.0232 9.29187 20.2103 11.1914C20.3974 13.0908 19.92 14.9964 18.8596 16.5835C17.7992 18.1705 16.2213 19.3407 14.3949 19.8948C12.5684 20.4488 10.6063 20.3524 8.84286 19.622C7.07947 18.8916 5.6239 17.5723 4.72415 15.889C3.8244 14.2057 3.53616 12.2625 3.90852 10.3905C4.28089 8.5185 5.29082 6.83352 6.76625 5.62267C8.24168 4.41181 10.0913 3.75 12 3.75"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+    />
+    <path
+      d="M20.979 5.40921C19.1661 5.2228 17 5 17 5L16.5909 8.97902"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/return-down.ts

@@ -0,0 +1,33 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const returnDown = (options: IconOptions) => {
+  return html`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap({
+      width: `${options.width}px`,
+      height: `${options.height}px`,
+    })}
+  >
+    <path
+      d="M12.1716 16.1715C13.4603 17.4602 15 19 15 19L17.8284 16.1716"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M7 11.8824V8C7 6.34315 8.34315 5 10 5H12C13.6569 5 15 6.34315 15 8V18"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/return-left.ts

@@ -0,0 +1,33 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const returnLeft = (options: IconOptions) => {
+  return html`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap({
+      width: `${options.width}px`,
+      height: `${options.height}px`,
+    })}
+  >
+    <path
+      d="M7.82847 12.1716C6.53981 13.4603 5 15 5 15L7.82843 17.8284"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M12.1176 7H16C17.6569 7 19 8.34315 19 10V12C19 13.6569 17.6569 15 16 15H6"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/return-right.ts

@@ -0,0 +1,33 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const returnRight = (options: IconOptions) => {
+  return html`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap({
+      width: `${options.width}px`,
+      height: `${options.height}px`,
+    })}
+  >
+    <path
+      d="M16.1715 12.8284C17.4602 11.5397 19 10 19 10L16.1716 7.17157"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M11.8824 18L8 18C6.34315 18 5 16.6569 5 15L5 13C5 11.3431 6.34315 10 8 10L18 10"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/return-up.ts

@@ -0,0 +1,33 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const returnUp = (options: IconOptions) => {
+  return html`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap({
+      width: `${options.width}px`,
+      height: `${options.height}px`,
+    })}
+  >
+    <path
+      d="M12.1716 7.82847C13.4603 6.53981 15 5 15 5L17.8284 7.82843"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M7 12.1176V16C7 17.6569 8.34315 19 10 19H12C13.6569 19 15 17.6569 15 16V6"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/search.ts

@@ -0,0 +1,28 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const search = (options: IconOptions) => {
+  return html`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap({
+      width: `${options.width}px`,
+      height: `${options.height}px`,
+    })}
+  >
+    <path
+      d="M18.25 10.5C18.25 14.7802 14.7802 18.25 10.5 18.25C6.21979 18.25 2.75 14.7802 2.75 10.5C2.75 6.21979 6.21979 2.75 10.5 2.75C14.7802 2.75 18.25 6.21979 18.25 10.5Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+    />
+    <path
+      d="M16.5303 15.4697L16 14.9393L14.9393 16L15.4697 16.5303L16.5303 15.4697ZM20.4697 21.5303C20.7626 21.8232 21.2374 21.8232 21.5303 21.5303C21.8232 21.2374 21.8232 20.7626 21.5303 20.4697L20.4697 21.5303ZM15.4697 16.5303L20.4697 21.5303L21.5303 20.4697L16.5303 15.4697L15.4697 16.5303Z"
+      fill="var(--${options.color})"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/settings.ts

@@ -0,0 +1,33 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const settings = (options: IconOptions) => {
+  return html`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap({
+      width: `${options.width}px`,
+      height: `${options.height}px`,
+    })}
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M4.10627 15.6778L5.50414 15.8918C6.53605 16.0498 7.27298 16.9737 7.19699 18.0146L7.094 19.4255C7.064 19.8365 7.28798 20.2234 7.65894 20.4024L8.69285 20.9004C9.06381 21.0793 9.50677 21.0123 9.80975 20.7334L10.8486 19.7735C11.6146 19.0655 12.7965 19.0655 13.5634 19.7735L14.6023 20.7334C14.9053 21.0133 15.3472 21.0793 15.7192 20.9004L16.7551 20.4014C17.1251 20.2234 17.3481 19.8375 17.3181 19.4275L17.2151 18.0146C17.1391 16.9737 17.876 16.0498 18.9079 15.8918L20.3058 15.6778C20.7127 15.6158 21.0407 15.3109 21.1327 14.9089L21.3877 13.791C21.4797 13.389 21.3167 12.9721 20.9767 12.7401L19.8098 11.9412C18.9489 11.3512 18.6859 10.1993 19.2059 9.29443L19.9108 8.06854C20.1158 7.71157 20.0818 7.26461 19.8248 6.94264L19.1099 6.04573C18.8529 5.72376 18.425 5.59077 18.031 5.71176L16.6791 6.12572C15.6802 6.43169 14.6153 5.91874 14.2313 4.94783L13.7134 3.63495C13.5614 3.25098 13.1904 2.99901 12.7775 3L11.6316 3.00301C11.2186 3.00401 10.8486 3.25798 10.6987 3.64295L10.1937 4.94083C9.81374 5.91774 8.74384 6.43469 7.74194 6.12672L6.33406 5.69476C5.9391 5.57277 5.50914 5.70676 5.25216 6.03073L4.54223 6.92864C4.28525 7.25361 4.25426 7.70157 4.46324 8.05854L5.18417 9.28743C5.71512 10.1933 5.45515 11.3562 4.58923 11.9492L3.43633 12.7391C3.09636 12.9721 2.93338 13.389 3.02537 13.79L3.28035 14.9079C3.37134 15.3109 3.69931 15.6158 4.10627 15.6778Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M14.1214 9.87858C15.2929 11.05 15.2929 12.95 14.1214 14.1214C12.95 15.2929 11.05 15.2929 9.87858 14.1214C8.70714 12.95 8.70714 11.05 9.87858 9.87858C11.05 8.70714 12.95 8.70714 14.1214 9.87858Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/smart-contract-doc.ts

@@ -0,0 +1,40 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const smartContractDoc = (options: IconOptions) => {
+  return html`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap({
+      width: `${options.width}px`,
+      height: `${options.height}px`,
+    })}
+  >
+    <path
+      d="M10 8H9.38462C8.83233 8 8.38462 8.44772 8.38462 9V10.4887C8.38462 10.8098 8.23042 11.1114 7.97011 11.2994L7.56124 11.5947C7.2849 11.7942 7.2849 12.2058 7.56124 12.4053L7.97011 12.7006C8.23042 12.8886 8.38462 13.1902 8.38462 13.5113V15C8.38462 15.5523 8.83233 16 9.38462 16H10"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+    />
+    <path
+      d="M14 8H14.6154C15.1677 8 15.6154 8.44772 15.6154 9V10.4887C15.6154 10.8098 15.7696 11.1114 16.0299 11.2994L16.4388 11.5947C16.7151 11.7942 16.7151 12.2058 16.4388 12.4053L16.0299 12.7006C15.7696 12.8886 15.6154 13.1902 15.6154 13.5113V15C15.6154 15.5523 15.1677 16 14.6154 16H14"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+    />
+    <rect
+      x="3.25"
+      y="1.25"
+      width="17.5"
+      height="21.5"
+      rx="2.75"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/smart-contract.ts

@@ -0,0 +1,31 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const smartContract = (options: IconOptions) => {
+  return html`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap({
+      width: `${options.width}px`,
+      height: `${options.height}px`,
+    })}
+  >
+    <path
+      d="M9 3H7.69231C6.03545 3 4.69231 4.34315 4.69231 6V9.18833C4.69231 9.53715 4.51055 9.86076 4.21268 10.0423L1.70067 11.573C1.38092 11.7679 1.38092 12.2321 1.70067 12.427L4.21268 13.9577C4.51055 14.1392 4.69231 14.4628 4.69231 14.8117V18C4.69231 19.6569 6.03545 21 7.69231 21H9"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+    />
+    <path
+      d="M15 3H16.3077C17.9645 3 19.3077 4.34315 19.3077 6V9.18833C19.3077 9.53715 19.4895 9.86076 19.7873 10.0423L22.2993 11.573C22.6191 11.7679 22.6191 12.2321 22.2993 12.427L19.7873 13.9577C19.4895 14.1392 19.3077 14.4628 19.3077 14.8117V18C19.3077 19.6569 17.9645 21 16.3077 21H15"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/star-filled.ts

@@ -0,0 +1,23 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const starFilled = (options: IconOptions) => {
+  return html`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap({
+      width: `${options.width}px`,
+      height: `${options.height}px`,
+    })}
+  >
+    <path
+      d="M11.1751 3.20359C11.5723 2.62402 12.4277 2.62401 12.8249 3.20359L15.3257 6.85257C15.4557 7.0423 15.6472 7.18141 15.8678 7.24645L20.111 8.49726C20.7849 8.69593 21.0492 9.50939 20.6208 10.0663L17.9232 13.5723C17.7829 13.7546 17.7098 13.9796 17.7161 14.2096L17.8377 18.6316C17.8571 19.334 17.1651 19.8367 16.5031 19.6013L12.335 18.1191C12.1183 18.0421 11.8817 18.0421 11.665 18.1191L7.49693 19.6013C6.83492 19.8367 6.14295 19.334 6.16226 18.6316L6.28388 14.2096C6.29021 13.9796 6.21708 13.7546 6.07681 13.5723L3.37922 10.0663C2.95075 9.5094 3.21506 8.69593 3.88901 8.49726L8.1322 7.24645C8.35282 7.18141 8.54429 7.0423 8.67432 6.85257L11.1751 3.20359Z"
+      fill="var(--${options.color})"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/star-outline.ts

@@ -0,0 +1,24 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const starOutline = (options: IconOptions) => {
+  return html`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap({
+      width: `${options.width}px`,
+      height: `${options.height}px`,
+    })}
+  >
+    <path
+      d="M13.0311 4.83116L14.506 6.98324C14.8636 7.505 15.3901 7.88754 15.9968 8.06639L18.4993 8.80408C19.3418 9.05242 19.6722 10.0693 19.1366 10.7653L17.5456 12.8331C17.1599 13.3344 16.9588 13.9534 16.9762 14.5857L17.0479 17.1936C17.0721 18.0716 16.2071 18.7 15.3796 18.4058L12.9214 17.5316C12.3254 17.3197 11.6746 17.3197 11.0786 17.5316L8.62043 18.4058C7.79292 18.7 6.92795 18.0716 6.9521 17.1937L7.02382 14.5857C7.04121 13.9534 6.8401 13.3344 6.45438 12.8331L4.86341 10.7653C4.32783 10.0693 4.65822 9.05242 5.50066 8.80408L8.00317 8.06639C8.60989 7.88754 9.13641 7.505 9.494 6.98324L10.9689 4.83117C11.4654 4.1067 12.5346 4.1067 13.0311 4.83116Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/step-dot.ts

@@ -0,0 +1,34 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const stepDot = (options: IconOptions) => {
+  return html`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap({
+      width: `${options.width}px`,
+      height: `${options.height}px`,
+    })}
+  >
+    <path
+      d="M21.25 12C21.25 17.1086 17.1086 21.25 12 21.25C6.89137 21.25 2.75 17.1086 2.75 12C2.75 6.89137 6.89137 2.75 12 2.75C17.1086 2.75 21.25 6.89137 21.25 12Z"
+      fill="#243542"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+    />
+    <circle
+      cx="12"
+      cy="12"
+      r="3.25"
+      fill="var(--${options.secondaryColor})"
+      stroke="var(--${options.secondaryColor})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/step-progress.ts

@@ -0,0 +1,31 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const stepProgress = (options: IconOptions) => {
+  return html`<svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap({
+      width: `${options.width}px`,
+      height: `${options.height}px`,
+    })}
+  >
+    <path
+      d="M21.25 12C21.25 17.1086 17.1086 21.25 12 21.25C6.89137 21.25 2.75 17.1086 2.75 12C2.75 6.89137 6.89137 2.75 12 2.75C17.1086 2.75 21.25 6.89137 21.25 12Z"
+      fill="#243542"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+    />
+    <path
+      d="M18.25 12C18.25 13.2361 17.8834 14.4445 17.1967 15.4723C16.5099 16.5001 15.5338 17.3012 14.3918 17.7742C13.2497 18.2473 11.9931 18.3711 10.7807 18.1299C9.5683 17.8888 8.45466 17.2935 7.58058 16.4194C6.7065 15.5453 6.11125 14.4317 5.87009 13.2193C5.62893 12.0069 5.75271 10.7503 6.22575 9.60823C6.6988 8.46619 7.49988 7.49007 8.52769 6.80331C9.55549 6.11656 10.7639 5.75 12 5.75"
+      stroke="var(--${options.secondaryColor})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+    />
+  </svg> `
+}