@lukso/web-components 1.3.1 → 1.5.0

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> `
+}

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

@@ -0,0 +1,30 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const edit = (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.20522 17.4916L18.5695 8.12731C18.9601 7.73679 18.9601 7.10362 18.5695 6.7131L16.5635 4.70704C16.173 4.31652 15.5398 4.31652 15.1493 4.70704L5.78495 14.0714C5.64561 14.2107 5.55055 14.3881 5.51169 14.5813L5.00661 17.0924C4.86572 17.7929 5.48368 18.4109 6.18417 18.27L8.6953 17.7649C8.88848 17.726 9.06588 17.631 9.20522 17.4916Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+    />
+    <path
+      d="M13.2913 6.28015L16.7115 9.70042"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/error.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 error = (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="M6 6.00012L18 18.0001"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/eth-logo.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 ethLogo = (options: IconOptions) => {
+  return html`<svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    style=${styleMap({
+      width: `${options.width}px`,
+      height: `${options.height}px`,
+    })}
+  >
+    <g clip-path="url(#clip0_1595_18810)">
+      <path
+        d="M7.99846 0L7.89111 0.364619V10.9441L7.99846 11.0512L12.9092 8.14837L7.99846 0Z"
+        fill="#CDDAE4"
+      />
+      <path
+        d="M7.99854 0L3.08765 8.14837L7.99854 11.0512V5.91619V0Z"
+        fill="#CDDAE4"
+      />
+      <path
+        d="M7.99849 11.9809L7.93799 12.0547V15.8232L7.99849 15.9998L12.9123 9.07959L7.99849 11.9809Z"
+        fill="#ACC2D2"
+      />
+      <path
+        d="M7.99854 15.9998V11.9809L3.08765 9.07959L7.99854 15.9998Z"
+        fill="#ACC2D2"
+      />
+      <path
+        d="M7.99854 11.0512L12.9093 8.14844L7.99854 5.91626V11.0512Z"
+        fill="#BDCEDB"
+      />
+      <path
+        d="M3.08765 8.14844L7.99854 11.0512V5.91626L3.08765 8.14844Z"
+        fill="#BDCEDB"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_1595_18810">
+        <rect width="16" height="16" fill="white" />
+      </clipPath>
+    </defs>
+  </svg> `
+}

package/src/components/lukso-icon/icons/expand.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 expand = (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="M6 6.00012L18 18.0001"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/extension.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 extension = (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="M10.5789 7.68421C12.1486 7.68421 13.421 6.41176 13.421 4.84211C13.421 3.27245 12.1486 2 10.5789 2C9.00927 2 7.73682 3.27245 7.73682 4.84211C7.73682 6.41176 9.00927 7.68421 10.5789 7.68421ZM19.1578 16.2632C20.7274 16.2632 21.9999 14.9907 21.9999 13.4211C21.9999 11.8514 20.7274 10.579 19.1578 10.579C17.5881 10.579 16.3157 11.8514 16.3157 13.4211C16.3157 14.9907 17.5881 16.2632 19.1578 16.2632Z"
+      fill="var(--${options.color})"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M3 7.84216C3 6.73759 3.89543 5.84216 5 5.84216H16.1579C17.2625 5.84216 18.1579 6.73759 18.1579 7.84216V19.0001C18.1579 20.1046 17.2625 21.0001 16.1579 21.0001H13.2401C13.357 20.689 13.421 20.3519 13.421 19.9999C13.421 18.4303 12.1486 17.1578 10.5789 17.1578C9.00927 17.1578 7.73682 18.4303 7.73682 19.9999C7.73682 20.3519 7.8008 20.689 7.91777 21.0001H5C3.89543 21.0001 3 20.1046 3 19.0001V16.0823C3.31108 16.1992 3.6481 16.2632 4.00006 16.2632C5.56972 16.2632 6.84217 14.9907 6.84217 13.4211C6.84217 11.8514 5.56972 10.579 4.00006 10.579C3.6481 10.579 3.31108 10.643 3 10.7599V7.84216Z"
+      fill="var(--${options.color})"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/eye-hide.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 eyeHide = (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.99976 19L18.9998 5"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M9.77284 14.227C8.54284 12.997 8.54284 11.002 9.77284 9.77199C11.0028 8.54199 12.9978 8.54199 14.2278 9.77199"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M18.9998 9L20.7044 11.5569C20.889 11.8339 20.9273 12.1845 20.7837 12.4849C19.3958 15.3885 15.55 20.0126 9.49976 18.5"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M17.0438 6.956C15.4968 5.759 13.7478 5 11.9998 5C8.50475 5 5.00975 8.033 3.11775 11.533C2.96075 11.824 2.96075 12.177 3.11775 12.468C4.06375 14.217 5.40975 15.849 6.95575 17.045"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/eye-show.ts

@@ -0,0 +1,37 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const eyeShow = (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="M3.11799 12.467C2.96099 12.176 2.96099 11.823 3.11799 11.532C5.00999 8.033 8.50499 5 12 5C15.495 5 18.99 8.033 20.882 11.533C21.039 11.824 21.039 12.177 20.882 12.468C18.99 15.967 15.495 19 12 19C8.50499 19 5.00999 15.967 3.11799 12.467Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M14.1213 9.87868C15.2929 11.0502 15.2929 12.9497 14.1213 14.1213C12.9497 15.2929 11.0502 15.2929 9.87868 14.1213C8.70711 12.9497 8.70711 11.0502 9.87868 9.87868C11.0502 8.70711 12.9497 8.70711 14.1213 9.87868Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/filter.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 filter = (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.9998 7H19.9998"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M3.99976 17H11.9998"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M7.94461 8.94461C9.01846 7.87076 9.01846 6.12924 7.94461 5.05539C6.87076 3.98154 5.12924 3.98154 4.05539 5.05539C2.98154 6.12924 2.98154 7.87076 4.05539 8.94461C5.12924 10.0185 6.87076 10.0185 7.94461 8.94461Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+    />
+    <path
+      d="M19.9446 18.9446C21.0185 17.8708 21.0185 16.1292 19.9446 15.0554C18.8708 13.9815 17.1292 13.9815 16.0554 15.0554C14.9815 16.1292 14.9815 17.8708 16.0554 18.9446C17.1292 20.0185 18.8708 20.0185 19.9446 18.9446Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+    />
+  </svg> `
+}

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

@@ -0,0 +1,36 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const fishOutline = (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.25 7.125C8.87297 7.69734 6.83672 9.57703 5.61094 10.567C5.2573 10.2394 4.88462 9.93291 4.49484 9.64922C2.79047 8.40422 0.75 8.25 0.75 8.25C0.75 8.25 1.28297 10.6655 2.68875 11.992C1.28297 13.3191 0.75 15.7345 0.75 15.7345C0.75 15.7345 2.79047 15.5803 4.49484 14.3353C4.88133 14.0541 5.25088 13.7503 5.60156 13.4255C6.825 14.4164 8.87063 16.3008 11.25 16.875L10.5 19.5C12.3483 19.1873 14.1966 17.8355 14.94 17.2383C21 16.9688 23.25 13.0781 23.25 12C23.25 10.9688 21 7.03125 14.9583 6.76266C14.2275 6.17719 12.3637 4.815 10.5 4.5L11.25 7.125Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M19.5 11.9995C19.9142 11.9995 20.25 11.6637 20.25 11.2495C20.25 10.8353 19.9142 10.4995 19.5 10.4995C19.0858 10.4995 18.75 10.8353 18.75 11.2495C18.75 11.6637 19.0858 11.9995 19.5 11.9995Z"
+      fill="var(--${options.color})"
+    />
+    <path
+      d="M17.7361 16.6875C16.9096 15.2635 16.4744 13.6464 16.4744 12C16.4744 10.3536 16.9096 8.73646 17.7361 7.3125"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-miterlimit="20"
+      stroke-linecap="round"
+    />
+  </svg> `
+}

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

@@ -0,0 +1,45 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const flip = (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 8C17.4183 8 21 9.64162 21 11.6667C21 12.5531 20.3137 13.366 19.1714 14"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+    />
+    <path
+      d="M14.8285 10.6567C13.5398 9.36808 12 7.82837 12 7.82837L14.8284 4.99994"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M11 16C6.58172 16 3 14.3584 3 12.3333C3 11.4469 3.68628 10.634 4.8286 10"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+    />
+    <path
+      d="M9.17153 13.3433C10.4602 14.6319 12 16.1716 12 16.1716L9.17157 19.0001"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

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

@@ -0,0 +1,61 @@
+import { html } from 'lit'
+import { styleMap } from 'lit/directives/style-map.js'
+
+import { IconOptions } from '@/components/lukso-icon/index.js'
+
+export const globe = (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`,
+    })}
+  >
+    <g clip-path="url(#clip0_455_4588)">
+      <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 3L12 21"
+        stroke="var(--${options.color})"
+        stroke-width="${options.strokeWidth}"
+      />
+      <path
+        d="M21 12L3 12"
+        stroke="var(--${options.color})"
+        stroke-width="${options.strokeWidth}"
+      />
+      <path
+        d="M12 3V3C5.44859 7.21162 5.44859 16.7884 12 21V21"
+        stroke="var(--${options.color})"
+        stroke-width="${options.strokeWidth}"
+      />
+      <path
+        d="M12 3V3C18.5514 7.21162 18.5514 16.7884 12 21V21"
+        stroke="var(--${options.color})"
+        stroke-width="${options.strokeWidth}"
+      />
+      <path
+        d="M5 18.5V18.5C8.70577 14.2648 15.2942 14.2648 19 18.5V18.5"
+        stroke="var(--${options.color})"
+        stroke-width="${options.strokeWidth}"
+      />
+      <path
+        d="M5 5.5V5.5C8.70577 9.73517 15.2942 9.73517 19 5.5V5.5"
+        stroke="var(--${options.color})"
+        stroke-width="${options.strokeWidth}"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_455_4588">
+        <rect width="24" height="24" fill="white" />
+      </clipPath>
+    </defs>
+  </svg> `
+}

package/src/components/lukso-icon/icons/google-color.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 googleColor = (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="m22.5562 12.2409c0-.9044-.0734-1.5643-.2322-2.24871h-10.3269v4.08181h6.0617c-.1222 1.0144-.7822 2.5421-2.2487 3.5686l-.0206.1367 3.2652 2.5295.2262.0226c2.0776-1.9188 3.2753-4.7419 3.2753-8.0905z"
+      fill="#4285f4"
+    />
+    <path
+      d="m11.9988 23c2.9697 0 5.4628-.9778 7.2838-2.6642l-3.4708-2.6888c-.9288.6478-2.1754 1.0999-3.813 1.0999-2.90868 0-5.37735-1.9186-6.25737-4.5706l-.12899.0109-3.39519 2.6276-.0444.1234c1.80873 3.593 5.52399 6.0618 9.82595 6.0618z"
+      fill="#34a853"
+    />
+    <path
+      d="m5.74179 14.1771c-.23219-.6844-.36658-1.4177-.36658-2.1754 0-.7578.13439-1.491.35437-2.17542l-.00615-.14576-3.43774-2.66978-.11248.0535c-.74546 1.49101-1.17321 3.16536-1.17321 4.93746 0 1.772.42775 3.4463 1.17321 4.9373z"
+      fill="#fbbc05"
+    />
+    <path
+      d="m11.9988 5.25296c2.0653 0 3.4585.89215 4.2529 1.6377l3.1042-3.03089c-1.9064-1.77207-4.3874-2.85977-7.3571-2.85977-4.30196 0-8.01722 2.46867-9.82595 6.06169l3.55637 2.76204c.89223-2.65201 3.3609-4.57077 6.26958-4.57077z"
+      fill="#eb4335"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/hamburger.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 hamburger = (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 7H19"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M5 12L19 12"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M5 17H19"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}

package/src/components/lukso-icon/icons/infinite.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 infinite = (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 12C12 12 9.75 7.5 6.09375 7.5C3.55688 7.5 1.5 9.51562 1.5 12C1.5 14.4844 3.55688 16.5 6.09375 16.5C7.85203 16.5 9.42188 15.4495 10.5 14.25"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+    />
+    <path
+      d="M12 12C12 12 14.25 16.5 17.9062 16.5C20.4431 16.5 22.5 14.4844 22.5 12C22.5 9.51562 20.4431 7.5 17.9062 7.5C16.148 7.5 14.5781 8.55047 13.5 9.75"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-miterlimit="10"
+      stroke-linecap="round"
+    />
+  </svg> `
+}

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

package/src/components/lukso-icon/icons/key-outline.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 keyOutline = (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.2234 7.83609C10.2234 8.44547 10.2234 9.03609 10.4156 9.58922C8.39531 11.9611 3.06094 18.2283 2.56406 18.7064C2.46531 18.795 2.38631 18.9034 2.3322 19.0245C2.27809 19.1457 2.25009 19.2769 2.25 19.4095C2.25 19.808 2.49375 20.1923 2.7 20.408C3.00937 20.7314 4.33125 21.9548 4.575 21.7205C5.29687 21.0173 5.44219 20.8298 5.7375 20.5392C6.18281 20.1033 5.69062 19.2127 5.84531 18.8517C6 18.4908 6.16406 18.4205 6.43125 18.3642C6.69844 18.308 7.17187 18.5002 7.54219 18.5048C7.93125 18.5095 8.14219 18.3455 8.43281 18.0736C8.66719 17.858 8.83594 17.6564 8.84063 17.3423C8.85 16.9205 8.24063 16.3627 8.69531 15.9173C9.15 15.472 9.80625 16.208 10.2891 16.1517C10.7719 16.0955 11.3578 15.4252 11.4188 15.1392C11.4797 14.8533 10.8703 14.1173 10.9641 13.7002C10.9969 13.5595 11.2828 13.2314 11.4984 13.1845C11.7141 13.1377 12.6703 13.508 12.8859 13.4611C13.1484 13.4048 13.4531 13.1283 13.7016 12.9736C14.4281 13.2877 15.0891 13.4142 15.9375 13.4142C19.1484 13.4142 21.75 10.9111 21.75 7.82672C21.75 4.74234 19.1484 2.25 15.9375 2.25C12.7266 2.25 10.2234 4.75172 10.2234 7.83609ZM18.75 6.75C18.75 7.04667 18.662 7.33668 18.4972 7.58336C18.3324 7.83003 18.0981 8.02229 17.824 8.13582C17.5499 8.24935 17.2483 8.27906 16.9574 8.22118C16.6664 8.1633 16.3991 8.02044 16.1893 7.81066C15.9796 7.60088 15.8367 7.33361 15.7788 7.04264C15.7209 6.75166 15.7506 6.45006 15.8642 6.17598C15.9777 5.90189 16.17 5.66762 16.4166 5.5028C16.6633 5.33797 16.9533 5.25 17.25 5.25C17.6478 5.25 18.0294 5.40804 18.3107 5.68934C18.592 5.97064 18.75 6.35218 18.75 6.75Z"
+      stroke="var(--${options.color})"
+      stroke-width="${options.strokeWidth}"
+      stroke-linejoin="round"
+    />
+  </svg> `
+}