@lukso/web-components 1.3.0 → 1.4.0

package/src/components/lukso-icon/icons/steps.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 steps = (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 10.0001C12.1776 10.0001 10 10 10 10L10 14"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M18 6.00007C16.1776 6.00007 14 6 14 6L14 10"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M10 14.0001C8.17755 14.0001 6 14 6 14L6 18"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

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

@@ -0,0 +1,26 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const tick = (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="M19 8L9.48366 17L6.92157 14.4286L5.64052 13.1429L5 12.5"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

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

@@ -0,0 +1,47 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const timerOutline = (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 4H20"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+    />
+    <path
+      d="M6 5C6 5.17925 6.00788 5.34626 6.02293 5.50178C6.28304 8.18956 10.714 9.22784 11.5854 11.7837V11.7837C11.7202 12.1794 12.2798 12.1794 12.4146 11.7837V11.7837C13.286 9.22784 17.717 8.18956 17.9771 5.50178C17.9921 5.34626 18 5.17925 18 5"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+    />
+    <path
+      d="M20 20L4 20"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+    />
+    <path
+      d="M18 19C18 18.8208 17.9921 18.6537 17.9771 18.4982C17.717 15.8104 13.286 14.7722 12.4146 12.2163V12.2163C12.2798 11.8206 11.7202 11.8206 11.5854 12.2163V12.2163C10.714 14.7722 6.28304 15.8104 6.02293 18.4982C6.00788 18.6537 6 18.8208 6 19"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+    />
+    <path
+      d="M7.5 16C10.0994 15.1537 14.6225 15.4636 16.5 16C17.4191 16.2626 17.5293 16.9407 17.5217 17.288C17.5187 17.4289 17.5143 17.5714 17.5419 17.7096L17.7608 18.8039C17.8845 19.4227 17.4112 20 16.7802 20H7.2198C6.58876 20 6.11546 19.4227 6.23922 18.8039L6.4584 17.708C6.48583 17.5708 6.48159 17.4292 6.48042 17.2894C6.47759 16.9509 6.59647 16.2941 7.5 16Z"
+      fill="var(--${options.color})"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/transaction-receive.ts

@@ -0,0 +1,39 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const transactionReceive = (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="M5.25 9.875L12 16.625L18.75 9.875"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M12 15.6875V2"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M2 18V20C2 21.1046 2.89543 22 4 22H20C21.1046 22 22 21.1046 22 20V18"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/transaction-send.ts

@@ -0,0 +1,39 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const transactionSend = (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 8.75L12 2L5.25 8.75"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M12 2.9375L12 16.625"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M2 18V20C2 21.1046 2.89543 22 4 22H20C21.1046 22 22 21.1046 22 20V18"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+    />
+  </svg> `
+}

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

@@ -0,0 +1,47 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const transfer = (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 2.25L19.5 7.5L14.25 12.75"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M18.697 7.5H4.5"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M9.75 21.75L4.5 16.5L9.75 11.25"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M5.34375 16.5H19.5"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/trash.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 trash = (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 9L6.64154 17.2331C6.76323 18.7948 8.06601 20 9.63247 20H14.3675C15.934 20 17.2368 18.7948 17.3585 17.2331L18 9"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M4 6H20"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M6 6H7.75C8.44036 6 9 5.44036 9 4.75V4.75C9 4.05964 9.55964 3.5 10.25 3.5H13.75C14.4404 3.5 15 4.05964 15 4.75V4.75C15 5.44036 15.5596 6 16.25 6H18"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/turn-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 turnDown = (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="M5.99999 13.1715C7.28865 14.4602 8.82837 16 8.82837 16L11.6568 13.1716"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M17 7L11.8284 7C10.1715 7 8.82837 8.34315 8.82837 10L8.82837 15"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/turn-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 turnLeft = (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.82847 5.99999C8.53981 7.28865 7 8.82837 7 8.82837L9.82843 11.6568"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M16 17V11.8284C16 10.1715 14.6569 8.82837 13 8.82837H8"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/turn-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 turnRight = (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.1715 5.99999C14.4602 7.28865 16 8.82837 16 8.82837L13.1716 11.6568"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M7 17V11.8284C7 10.1715 8.34315 8.82837 10 8.82837H15"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/turn-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 turnUp = (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="M5.99999 9.82847C7.28865 8.53981 8.82837 7 8.82837 7L11.6568 9.82843"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M17 16L11.8284 16C10.1715 16 8.82837 14.6569 8.82837 13L8.82837 8"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

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

@@ -0,0 +1,41 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const unlocked = (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="M5 19V11C5 10.4477 5.44772 10 6 10H18C18.5523 10 19 10.4477 19 11V19C19 20.1046 18.1046 21 17 21H7C5.89543 21 5 20.1046 5 19Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+    />
+    <path
+      d="M13.2375 15.7375C13.9208 15.0541 13.9208 13.9459 13.2375 13.2625C12.5541 12.5792 11.4459 12.5792 10.7625 13.2625C10.0792 13.9459 10.0792 15.0541 10.7625 15.7375C11.4459 16.4208 12.5541 16.4208 13.2375 15.7375Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+    />
+    <path
+      d="M6.25 10V10.75H7.75V10H6.25ZM7.75 10V7H6.25V10H7.75ZM11 3.75H13.5V2.25H11V3.75ZM13.5 3.75C15.0188 3.75 16.25 4.98122 16.25 6.5H17.75C17.75 4.15279 15.8472 2.25 13.5 2.25V3.75ZM7.75 7C7.75 5.20507 9.20507 3.75 11 3.75V2.25C8.37665 2.25 6.25 4.37665 6.25 7H7.75Z"
+      fill="var(--${options.color})"
+    />
+    <path
+      d="M12 16.5V18"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

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

@@ -0,0 +1,35 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const walletOutline = (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="M19.5 6.75H4.5C3.25736 6.75 2.25 7.75736 2.25 9V18C2.25 19.2426 3.25736 20.25 4.5 20.25H19.5C20.7426 20.25 21.75 19.2426 21.75 18V9C21.75 7.75736 20.7426 6.75 19.5 6.75Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M19.2825 6.74998V5.34373C19.2824 4.99883 19.2062 4.6582 19.0592 4.34615C18.9123 4.0341 18.6984 3.75832 18.4326 3.53849C18.1668 3.31866 17.8558 3.16019 17.5217 3.0744C17.1877 2.98861 16.8388 2.9776 16.5 3.04217L4.155 5.1492C3.6189 5.25136 3.13526 5.53741 2.78749 5.958C2.43972 6.37859 2.24963 6.90736 2.25 7.4531V9.74998"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M17.25 15C16.9533 15 16.6633 14.912 16.4166 14.7472C16.17 14.5824 15.9777 14.3481 15.8642 14.074C15.7506 13.7999 15.7209 13.4983 15.7788 13.2074C15.8367 12.9164 15.9796 12.6491 16.1893 12.4393C16.3991 12.2296 16.6664 12.0867 16.9574 12.0288C17.2483 11.9709 17.5499 12.0006 17.824 12.1142C18.0981 12.2277 18.3324 12.42 18.4972 12.6666C18.662 12.9133 18.75 13.2033 18.75 13.5C18.75 13.8978 18.592 14.2794 18.3107 14.5607C18.0294 14.842 17.6478 15 17.25 15Z"
+      fill="var(--${options.color})"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/warning-round.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 warningRound = (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 8L12 13"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <circle cx="12" cy="16" r="1" fill="var(--${options.color})" />
+  </svg> `
+}

package/src/components/lukso-icon/icons/warning-triangle.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 warningTriangle = (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.2165 2.875L21.7428 19.375C21.839 19.5417 21.7187 19.75 21.5263 19.75H2.47372C2.28127 19.75 2.16099 19.5417 2.25721 19.375L11.7835 2.875C11.8797 2.70833 12.1203 2.70833 12.2165 2.875Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+    />
+    <path
+      d="M12 9L12 14"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <circle cx="12" cy="17" r="1" fill="var(--${options.color})" />
+  </svg> `
+}