@lukso/web-components 1.3.1 → 1.4.0

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

@@ -0,0 +1,54 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const bulbOutline = (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="M14.25 18V16.875C14.25 15.5157 15.7285 14.2299 16.6875 13.3125C18.0394 12.0202 18.75 10.2839 18.75 8.25003C18.75 4.50003 15.7627 1.50003 12 1.50003C11.1129 1.49755 10.2341 1.67046 9.41399 2.0088C8.59392 2.34714 7.84883 2.84425 7.22154 3.47154C6.59425 4.09883 6.09714 4.84392 5.7588 5.66399C5.42046 6.48405 5.24755 7.36291 5.25003 8.25003C5.25003 10.2113 5.99112 12.0652 7.31253 13.3125C8.26643 14.213 9.75003 15.5016 9.75003 16.875V18"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M10.5 22.5H13.5"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M9.75 20.25H14.25"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M12 18V12"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M13.7812 11.25C13.7812 11.25 12.773 12 12 12C11.227 12 10.2188 11.25 10.2188 11.25"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/camera.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 camera = (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 6V18C3 19.6569 4.34315 21 6 21H18C19.6569 21 21 19.6569 21 18V6C21 4.34315 19.6569 3 18 3H6C4.34315 3 3 4.34315 3 6Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+    />
+    <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}"
+    />
+    <rect
+      x="15"
+      y="5"
+      width="4"
+      height="2"
+      rx="1"
+      fill="var(--${options.color})"
+    />
+  </svg> `
+}

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

@@ -0,0 +1,59 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const clipboard = (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="M15.75 3H17.25C17.8467 3 18.419 3.23705 18.841 3.65901C19.2629 4.08097 19.5 4.65326 19.5 5.25V20.25C19.5 20.8467 19.2629 21.419 18.841 21.841C18.419 22.2629 17.8467 22.5 17.25 22.5H6.75C6.15326 22.5 5.58097 22.2629 5.15901 21.841C4.73705 21.419 4.5 20.8467 4.5 20.25V5.25C4.5 4.65326 4.73705 4.08097 5.15901 3.65901C5.58097 3.23705 6.15326 3 6.75 3H8.25"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M14.5252 1.5H9.47484C8.79838 1.5 8.25 2.04838 8.25 2.72484V3.27516C8.25 3.95162 8.79838 4.5 9.47484 4.5H14.5252C15.2016 4.5 15.75 3.95162 15.75 3.27516V2.72484C15.75 2.04838 15.2016 1.5 14.5252 1.5Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M17 9H7"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M13 12H7"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M10 15H7"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M13 15H12"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/clock.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 clock = (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"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+    />
+    <path
+      d="M12 6.5V12L15.5 15.5"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/close-lg.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 closeLg = (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="M6.34326 17.6569L17.657 6.34315"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M6.34326 6.34314L17.657 17.6568"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/close-sm.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 closeSm = (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="M8 16.0001L16.0002 7.99995"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M8 8L16.0002 16.0002"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

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

@@ -0,0 +1,25 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const cloud = (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.75 11.25C18.3333 7.05281 15.4219 4.5 12 4.5C8.76562 4.5 6.6825 6.75938 6 9C3.1875 9.28125 0.75 11.0433 0.75 14.25C0.75 17.3438 3.28125 19.5 6.375 19.5H18.5625C21.1406 19.5 23.25 18.2138 23.25 15.375C23.25 12.5709 20.7656 11.355 18.75 11.25Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/compass-outline.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 compassOutline = (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 12C21 7.03125 16.9688 3 12 3C7.03125 3 3 7.03125 3 12C3 16.9688 7.03125 21 12 21C16.9688 21 21 16.9688 21 12Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-miterlimit="10"
+    />
+    <path
+      d="M16.4378 7.07483L10.944 9.27233C10.5667 9.42322 10.224 9.64919 9.93665 9.93652C9.64931 10.2239 9.42334 10.5666 9.27245 10.9439L7.07495 16.4376C7.04767 16.5058 7.04099 16.5804 7.05575 16.6524C7.0705 16.7243 7.10603 16.7903 7.15793 16.8422C7.20984 16.8941 7.27583 16.9296 7.34774 16.9443C7.41965 16.9591 7.4943 16.9524 7.56245 16.9251L13.0562 14.7276C13.4335 14.5768 13.7762 14.3508 14.0636 14.0634C14.3509 13.7761 14.5769 13.4334 14.7278 13.0561L16.9253 7.56233C16.9525 7.49418 16.9592 7.41953 16.9445 7.34762C16.9297 7.27571 16.8942 7.20971 16.8423 7.15781C16.7904 7.1059 16.7244 7.07037 16.6525 7.05562C16.5806 7.04087 16.5059 7.04755 16.4378 7.07483V7.07483ZM12.0001 13.125C11.7776 13.125 11.5601 13.059 11.3751 12.9354C11.1901 12.8118 11.0459 12.6361 10.9607 12.4305C10.8756 12.2249 10.8533 11.9987 10.8967 11.7805C10.9401 11.5623 11.0473 11.3618 11.2046 11.2045C11.3619 11.0472 11.5624 10.94 11.7806 10.8966C11.9989 10.8532 12.2251 10.8755 12.4306 10.9606C12.6362 11.0458 12.8119 11.19 12.9355 11.375C13.0591 11.56 13.1251 11.7775 13.1251 12C13.1251 12.2984 13.0066 12.5845 12.7956 12.7955C12.5846 13.0065 12.2985 13.125 12.0001 13.125Z"
+      fill="var(--${options.color})"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/complete-filled.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 completeFilled = (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="var(--${options.color})"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+    />
+    <path
+      d="M8 12.1429L10.8 15L16 10"
+      stroke="var(--${options.secondaryColor})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/complete-outline.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 completeOutline = (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"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+    />
+    <path
+      d="M8 12.1429L10.8 15L16 10"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/connect.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 connect = (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.1584 6.06115C17.4126 6.93932 18.3565 8.192 18.855 9.63963C19.3535 11.0873 19.3808 12.6555 18.9332 14.1197C18.4856 15.5838 17.5859 16.8687 16.3632 17.7901C15.1404 18.7115 13.6573 19.2222 12.1265 19.2489C10.5957 19.2756 9.09573 18.817 7.84157 17.9389C6.58741 17.0607 5.64345 15.808 5.14499 14.3604C4.64653 12.9127 4.61915 11.3445 5.06679 9.88031C5.51442 8.41616 6.41409 7.1313 7.63684 6.20989"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M12 5.14282V12.2539"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/connections.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 connections = (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`,
+    })}
+  >
+    <clipPath id="a"><path d="m0 0h24v24h-24z" /></clipPath>
+    <g
+      clip-path="url(#a)"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+    >
+      <path
+        d="m10.6667 3.33325 7.5 7.49995-3.8021 3.8021-.0522.0522c-2.071 2.071-5.42887 2.071-7.49993 0-2.07105-2.0711-2.07105-5.42892 0-7.49997l.05215-.05215z"
+      />
+      <path d="m16.3738 2.37378-3.3333 3.33331" stroke-linecap="round" />
+      <path d="m19.126 5.12598-3.3333 3.33331" stroke-linecap="round" />
+      <path
+        d="m6.5 14.5c-3.15447 1.3519-2.64518 5.9728.72799 6.6052l4.77201.8948"
+      />
+    </g>
+  </svg> `
+}

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

@@ -0,0 +1,43 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const contractLock = (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.5 14.25V13.4062C13.5 12.6267 12.8316 12 12 12C11.1684 12 10.5 12.6267 10.5 13.4062V14.25"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M14.25 19.5H9.75C9.35218 19.5 8.97064 19.342 8.68934 19.0607C8.40804 18.7794 8.25 18.3978 8.25 18V15.75C8.25 15.3522 8.40804 14.9706 8.68934 14.6893C8.97064 14.408 9.35218 14.25 9.75 14.25H14.25C14.6478 14.25 15.0294 14.408 15.3107 14.6893C15.592 14.9706 15.75 15.3522 15.75 15.75V18C15.75 18.3978 15.592 18.7794 15.3107 19.0607C15.0294 19.342 14.6478 19.5 14.25 19.5Z"
+      fill="var(--${options.color})"
+    />
+    <path
+      d="M19.5 10.3711V19.5C19.5 20.0967 19.2629 20.669 18.841 21.091C18.419 21.5129 17.8467 21.75 17.25 21.75H6.75C6.15326 21.75 5.58097 21.5129 5.15901 21.091C4.73705 20.669 4.5 20.0967 4.5 19.5V4.5C4.5 3.90326 4.73705 3.33097 5.15901 2.90901C5.58097 2.48705 6.15326 2.25 6.75 2.25H11.3789C11.7766 2.25006 12.158 2.40804 12.4392 2.68922L19.0608 9.31078C19.342 9.59202 19.4999 9.97341 19.5 10.3711Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M12 2.38501V8.25001C12 8.64783 12.158 9.02936 12.4393 9.31067C12.7206 9.59197 13.1022 9.75001 13.5 9.75001H19.365"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

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

@@ -0,0 +1,55 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const controller = (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.9145 11.6638C21.052 7.76478 19.7728 5.2776 17.7225 4.6715C17.3254 4.55566 16.9136 4.49788 16.5 4.49994C15.2395 4.49994 14.2448 5.24994 12 5.24994C9.75512 5.24994 8.75856 4.49994 7.49996 4.49994C7.06906 4.49771 6.63995 4.55545 6.22496 4.6715C4.17184 5.2776 2.9034 7.76713 2.03106 11.6638C1.14043 15.644 1.30168 18.7888 3.04262 19.3926C4.26137 19.8145 5.35121 18.9421 6.3834 17.6582C7.55527 16.1957 8.99856 15.7457 12 15.7457C15.0014 15.7457 16.3884 16.1957 17.5621 17.6582C18.5934 18.9431 19.7236 19.8046 20.91 19.4001C22.8328 18.7434 22.8056 15.6909 21.9145 11.6638Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-miterlimit="10"
+    />
+    <path
+      d="M13.6875 11.4375C14.2053 11.4375 14.625 11.0178 14.625 10.5C14.625 9.98223 14.2053 9.5625 13.6875 9.5625C13.1697 9.5625 12.75 9.98223 12.75 10.5C12.75 11.0178 13.1697 11.4375 13.6875 11.4375Z"
+      fill="var(--${options.color})"
+    />
+    <path
+      d="M15.75 13.5C15.5645 13.5 15.3831 13.445 15.2289 13.3418C15.0747 13.2387 14.9545 13.0922 14.8836 12.9207C14.8128 12.7493 14.7943 12.5607 14.8307 12.3787C14.8671 12.1968 14.9566 12.0298 15.0879 11.8988C15.2193 11.7677 15.3865 11.6786 15.5685 11.6427C15.7506 11.6068 15.9391 11.6257 16.1104 11.697C16.2817 11.7684 16.4279 11.8889 16.5306 12.0434C16.6334 12.1978 16.688 12.3793 16.6875 12.5648C16.6869 12.8131 16.5878 13.0509 16.4121 13.2262C16.2363 13.4016 15.9982 13.5 15.75 13.5V13.5Z"
+      fill="var(--${options.color})"
+    />
+    <path
+      d="M15.75 9.375C16.2678 9.375 16.6875 8.95527 16.6875 8.4375C16.6875 7.91973 16.2678 7.5 15.75 7.5C15.2322 7.5 14.8125 7.91973 14.8125 8.4375C14.8125 8.95527 15.2322 9.375 15.75 9.375Z"
+      fill="var(--${options.color})"
+    />
+    <path
+      d="M17.8125 11.4375C18.3303 11.4375 18.75 11.0178 18.75 10.5C18.75 9.98223 18.3303 9.5625 17.8125 9.5625C17.2947 9.5625 16.875 9.98223 16.875 10.5C16.875 11.0178 17.2947 11.4375 17.8125 11.4375Z"
+      fill="var(--${options.color})"
+    />
+    <path
+      d="M7.5 8.25V12.75"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M9.75 10.5H5.25"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/copy.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 copy = (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 9V19C3 20.1046 3.89543 21 5 21H15C16.1046 21 17 20.1046 17 19V9C17 7.89543 16.1046 7 15 7H5C3.89543 7 3 7.89543 3 9Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+    />
+    <path
+      d="M7 7V5C7 3.89543 7.89543 3 9 3H19C20.1046 3 21 3.89543 21 5V15C21 16.1046 20.1046 17 19 17H17"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+    />
+  </svg> `
+}

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

@@ -0,0 +1,38 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const crossOutline = (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"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+    />
+    <path
+      d="M8 16.0001L16.0002 7.99995"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M8 8L16.0002 16.0002"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

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

@@ -0,0 +1,22 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const dots = (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`,
+    })}
+  >
+    <circle cx="12" cy="6" r="2" fill="var(--${options.color})" />
+    <circle cx="12" cy="12" r="2" fill="var(--${options.color})" />
+    <circle cx="12" cy="18" r="2" fill="var(--${options.color})" />
+  </svg> `
+}