@blockspoon/cert-badge-renderer 1.0.1

package/src/templates/icons/IconBg4.ts

@@ -0,0 +1,36 @@
+import { ISvgProps } from "../../interface"; 
+
+export function createIconBg4({
+  mainColor = "#96A6B4",
+  subColor = "#96A6B4",
+}: ISvgProps): string {
+  return `
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 103 115"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMidYMid meet"
+      style="
+        width: 100%;
+        height: 100%;
+        max-width: 100%;
+        max-height: 100%;
+        z-index: 1;
+        mix-blend-mode: normal;
+        pointer-events: none;
+        display: block;
+      "
+    >
+      <path
+        d="M96.373 23.8877L58.1368 1.77951C54.0329 -0.59317 48.975 -0.59317 44.8711 1.77951L6.63092 23.8877C2.527 26.2604 0 30.6465 0 35.3918V79.6082C0 84.3535 2.527 88.7396 6.63092 91.1123L44.8671 113.22C48.971 115.593 54.029 115.593 58.1329 113.22L96.3691 91.1123C100.473 88.7396 103 84.3535 103 79.6082V35.3918C103 30.6465 100.473 26.2604 96.3691 23.8877H96.373Z"
+        fill="${mainColor}"
+      />
+      <path
+        d="M91.1451 27.3951L57.3636 7.59382C53.7378 5.46873 49.2691 5.46873 45.6434 7.59382L11.8584 27.3951C8.23259 29.5202 6 33.4486 6 37.6988V77.3012C6 81.5514 8.23259 85.4798 11.8584 87.6049L45.6399 107.406C49.2657 109.531 53.7343 109.531 57.3601 107.406L91.1416 87.6049C94.7674 85.4798 97 81.5514 97 77.3012V37.6988C97 33.4486 94.7674 29.5202 91.1416 27.3951H91.1451Z"
+        fill="${subColor}"
+      />
+    </svg>
+  `;
+}

package/src/templates/icons/IconBg5.ts

@@ -0,0 +1,69 @@
+import { ISvgProps } from "../../interface"; 
+
+export function createIconBg5({
+  mainColor = "#96A6B4",
+  subColor = "#96A6B4",
+  extraColor1 = "#96A6B4",
+}: ISvgProps): string {
+  return `
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 162 160"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMidYMid meet"
+      style="
+        width: 100%;
+        height: 100%;
+        max-width: 100%;
+        max-height: 100%;
+        z-index: 1;
+        mix-blend-mode: normal;
+        pointer-events: none;
+        display: block;
+      "
+    >
+      <path
+        d="M56.6444 15.7201C42.0758 18.8864 20.695 23.9883 9.22461 27.4015L13.0422 8.64937C45.1062 0.568597 65.2661 -0.00083071 81.0309 0L56.6444 15.7201Z"
+        fill="url(#paint0_linear_2364_704)"
+      />
+      <path
+        d="M105.41 15.7201C119.979 18.8864 141.36 23.9883 152.83 27.4015L149.012 8.64937C116.949 0.568597 96.7885 -0.00083071 81.0238 0L105.41 15.7201Z"
+        fill="url(#paint1_linear_2364_704)"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M0.429688 87.3977C4.63115 128.187 39.1002 160 80.9996 160C122.941 160 157.437 128.123 161.582 87.2751C108.227 64.4115 77.7728 57.5271 0.429688 87.3977Z"
+        fill="${mainColor}"
+      />
+      <circle cx="81" cy="79" r="79" fill="${subColor}" />
+      <circle cx="81" cy="79" r="67" fill="${extraColor1}" />
+      <defs>
+        <linearGradient
+          id="paint0_linear_2364_704"
+          x1="13.4309"
+          y1="10.187"
+          x2="60.8815"
+          y2="30.7762"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-opacity="0" />
+          <stop offset="1" stop-opacity="0.4" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_2364_704"
+          x1="148.624"
+          y1="10.187"
+          x2="101.173"
+          y2="30.7762"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-opacity="0" />
+          <stop offset="1" stop-opacity="0.4" />
+        </linearGradient>
+      </defs>
+    </svg>
+  `;
+}

package/src/templates/icons/IconBg6.ts

@@ -0,0 +1,110 @@
+import { ISvgProps } from "../../interface"; 
+
+export function createIconBg6({
+  mainColor = "#96A6B4",
+  subColor = "#96A6B4",
+}: ISvgProps): string {
+  return `
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 292 244"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMidYMid meet"
+      style="
+        width: 100%;
+        height: 100%;
+        max-width: 100%;
+        max-height: 100%;
+        z-index: 1;
+        mix-blend-mode: normal;
+        pointer-events: none;
+        display: block;
+      "
+    >
+      <path
+        d="M59.028 134.367L5.34351 156.071C2.38243 157.235 1.29086 160.884 3.12978 163.489L30.3748 183.055C30.8454 183.739 31.152 184.528 31.2432 185.356L31.7798 216.243C32.1781 219.86 36.1999 221.813 39.2675 219.888L97.2717 181.351C99.7782 179.782 100.339 176.368 98.4905 174.072L64.6541 135.864C63.313 134.189 61.0359 133.587 59.028 134.367Z"
+        fill="${mainColor}"
+      />
+      <path
+        d="M56.4687 208.446C44.425 198.825 29.1313 178.886 22.4863 149.155L41.0678 141.561L75.276 196.179L56.4687 208.446Z"
+        fill="url(#paint0_linear_2384_1365)"
+        fill-opacity="0.3"
+      />
+      <path
+        d="M232.972 134.367L286.656 156.071C289.618 157.235 290.709 160.884 288.87 163.489L261.625 183.055C261.155 183.739 260.848 184.528 260.757 185.356L260.22 216.243C259.822 219.86 255.8 221.813 252.733 219.888L194.728 181.351C192.222 179.782 191.661 176.368 193.509 174.072L227.346 135.864C228.687 134.189 230.964 133.587 232.972 134.367Z"
+        fill="${mainColor}"
+      />
+      <path
+        d="M235.912 208.631C247.956 199.01 263.25 179.07 269.895 149.34L251.313 141.745L217.105 196.364L235.912 208.631Z"
+        fill="url(#paint1_linear_2384_1365)"
+        fill-opacity="0.3"
+      />
+      <g filter="url(#filter0_d_2384_1365)">
+        <circle cx="146" cy="118" r="110" fill="${subColor}" />
+        <circle cx="146" cy="118" r="103.016" fill="${mainColor}" />
+        <circle cx="146" cy="118" r="96.0317" fill="${subColor}" />
+      </g>
+      <defs>
+        <filter
+          id="filter0_d_2384_1365"
+          x="24"
+          y="0"
+          width="244"
+          height="244"
+          filterUnits="userSpaceOnUse"
+          color-interpolation-filters="sRGB"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix
+            in="SourceAlpha"
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+            result="hardAlpha"
+          />
+          <feOffset dy="4" />
+          <feGaussianBlur stdDeviation="6" />
+          <feComposite in2="hardAlpha" operator="out" />
+          <feColorMatrix
+            type="matrix"
+            values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
+          />
+          <feBlend
+            mode="normal"
+            in2="BackgroundImageFix"
+            result="effect1_dropShadow_2384_1365"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_2384_1365"
+            result="shape"
+          />
+        </filter>
+        <linearGradient
+          id="paint0_linear_2384_1365"
+          x1="59.7029"
+          y1="169.241"
+          x2="39.9194"
+          y2="181.686"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop />
+          <stop offset="1" stop-opacity="0" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_2384_1365"
+          x1="232.678"
+          y1="169.426"
+          x2="252.461"
+          y2="181.87"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop />
+          <stop offset="1" stop-opacity="0" />
+        </linearGradient>
+      </defs>
+    </svg>
+  `;
+}

package/src/templates/icons/IconBg7.ts

@@ -0,0 +1,90 @@
+import { ISvgProps } from "../../interface"; 
+
+export function createIconBg7({
+  mainColor = "#96A6B4",
+  subColor = "#96A6B4",
+  extraColor1 = "#96A6B4",
+}: ISvgProps): string {
+  const paintId0 = `paint0_linear_${Math.random().toString(36).substr(2, 9)}`;
+  const paintId1 = `paint1_linear_${Math.random().toString(36).substr(2, 9)}`;
+  const paintId2 = `paint2_linear_${Math.random().toString(36).substr(2, 9)}`;
+
+  return `
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 180 165"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMidYMid meet"
+      style="
+        width: 100%;
+        height: 100%;
+        max-width: 100%;
+        max-height: 100%;
+        z-index: 1;
+        mix-blend-mode: normal;
+        pointer-events: none;
+        display: block;
+      "
+    >
+      <path
+        d="M160.684 76V64L179.684 75.5V86.5L160.684 76Z"
+        fill="url(#${paintId0})"
+      />
+      <path
+        d="M19.6836 75.2078V63.6445L0.683594 74.5819V86.1445L19.6836 75.2078Z"
+        fill="url(#${paintId1})"
+      />
+      <path
+        d="M151.612 36.6119L99.269 6.4294C93.651 3.19018 86.727 3.19018 81.109 6.4294L28.7609 36.6119C23.1429 39.8511 19.6836 45.8391 19.6836 52.3175V112.682C19.6836 119.161 23.1429 125.149 28.7609 128.388L81.1036 158.571C86.7216 161.81 93.6456 161.81 99.2636 158.571L151.606 128.388C157.224 125.149 160.684 119.161 160.684 112.682V52.3175C160.684 45.8391 157.23 39.8511 151.612 36.6119Z"
+        fill="url(#${paintId2})"
+      />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M99.269 6.4294L151.612 36.6119C157.23 39.8511 160.684 45.8391 160.684 52.3175V112.682C160.684 119.161 157.224 125.149 151.606 128.388L99.2636 158.571C93.6456 161.81 86.7216 161.81 81.1036 158.571L28.7609 128.388C23.1429 125.149 19.6836 119.161 19.6836 112.682V52.3175C19.6836 45.8391 23.1429 39.8511 28.7609 36.6119L81.109 6.4294C86.727 3.19018 93.651 3.19018 99.269 6.4294ZM79.111 2.96415C79.111 2.96414 79.111 2.96414 79.111 2.96413C85.9656 -0.98807 94.4124 -0.988065 101.267 2.96415L101.267 2.96422L153.61 33.1466C160.468 37.1009 164.684 44.4108 164.684 52.3175V112.682C164.684 120.591 160.46 127.9 153.604 131.853C153.604 131.853 153.604 131.853 153.604 131.853L101.262 162.036L101.262 162.036C94.407 165.988 85.9602 165.988 79.1056 162.036L79.1055 162.036L26.7629 131.853C19.9068 127.9 15.6836 120.592 15.6836 112.682V52.3175C15.6836 44.4085 19.9068 37.0997 26.7629 33.1466L26.7629 33.1466L79.111 2.96415Z"
+        fill="${extraColor1}"
+      />
+      <path
+        d="M144.641 41.2884L98.238 14.1818C93.2575 11.2727 87.1192 11.2727 82.1388 14.1818L35.7308 41.2884C30.7503 44.1975 27.6836 49.5752 27.6836 55.3934V109.607C27.6836 115.425 30.7503 120.802 35.7308 123.712L82.134 150.818C87.1145 153.727 93.2527 153.727 98.2332 150.818L144.636 123.712C149.617 120.802 152.684 115.425 152.684 109.607V55.3934C152.684 49.5752 149.617 44.1975 144.636 41.2884H144.641Z"
+        fill="${extraColor1}"
+      />
+      <defs>
+        <linearGradient
+          id="${paintId0}"
+          x1="178.684"
+          y1="73"
+          x2="158.684"
+          y2="71"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-opacity="0" />
+          <stop offset="1" stop-opacity="0.4" />
+        </linearGradient>
+        <linearGradient
+          id="${paintId1}"
+          x1="1.68359"
+          y1="72.6445"
+          x2="21.6836"
+          y2="70.6445"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-opacity="0" />
+          <stop offset="1" stop-opacity="0.4" />
+        </linearGradient>
+        <linearGradient
+          id="${paintId2}"
+          x1="90.1836"
+          y1="3.99998"
+          x2="90.1836"
+          y2="161"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="${mainColor}" />
+          <stop offset="1" stop-color="${subColor}" />
+        </linearGradient>
+      </defs>
+    </svg>
+  `;
+}

package/src/templates/icons/IconBg8.ts

@@ -0,0 +1,36 @@
+import { ISvgProps } from "../../interface"; 
+
+export function createIconBg8({
+  mainColor = "#96A6B4",
+  subColor = "#96A6B4",
+}: ISvgProps): string {
+  return `
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 111 121"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMidYMid meet"
+      style="
+        width: 100%;
+        height: 100%;
+        max-width: 100%;
+        max-height: 100%;
+        z-index: 1;
+        mix-blend-mode: normal;
+        pointer-events: none;
+        display: block;
+      "
+    >
+      <path
+        d="M111 85.419C111 89.9351 108.465 94.0687 104.439 96.1156L60.939 118.234C57.5212 119.972 53.4788 119.972 50.061 118.234L6.56102 96.1156C2.53547 94.0687 0 89.9351 0 85.419V26.6582C0 22.4061 2.20676 18.4104 5.8114 16.155C15.8619 9.86649 33.7768 -0.303463 57.0175 0.00694252C78.7379 0.300688 95.4757 10.0053 105.198 16.1449C108.792 18.4151 111 22.4056 111 26.6572V85.419Z"
+        fill="${mainColor}"
+      />
+      <path
+        d="M104 81.7238C104 86.2191 101.488 90.3374 97.4903 92.3942L60.9904 111.175C57.5448 112.948 53.4552 112.948 50.0097 111.175L13.5097 92.3942C9.51245 90.3374 7 86.2191 7 81.7238V31.3265C7 27.0967 9.17488 23.1051 12.7581 20.8574C21.6563 15.2759 37.0304 6.73859 56.8261 7.00614C75.3093 7.25909 89.6637 15.4033 98.2486 20.8436C101.821 23.1074 104 27.0962 104 31.3255V81.7238Z"
+        fill="${subColor}"
+      />
+    </svg>
+  `;
+}

package/src/templates/icons/IconBg9.ts

@@ -0,0 +1,53 @@
+import { ISvgProps } from "../../interface"; 
+
+export function createIconBg9({
+  mainColor = "#96A6B4",
+  subColor = "#96A6B4",
+  extraColor1 = "#96A6B4",
+}: ISvgProps): string {
+  const paintId0 = `paint0_linear_${Math.random().toString(36).substr(2, 9)}`;
+
+  return `
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 94 94"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMidYMid meet"
+      style="
+        width: 100%;
+        height: 100%;
+        max-width: 100%;
+        max-height: 100%;
+        z-index: 1;
+        mix-blend-mode: normal;
+        pointer-events: none;
+        display: block;
+      "
+    >
+      <circle cx="47" cy="47" r="47" fill="${extraColor1}" />
+      <circle
+        cx="47"
+        cy="47"
+        r="44"
+        fill="url(#${paintId0})"
+      />
+      <circle cx="47" cy="47" r="42" fill="${extraColor1}" />
+      <defs>
+        <linearGradient
+          id="${paintId0}"
+          x1="47"
+          y1="3"
+          x2="47"
+          y2="91"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="${mainColor}" />
+          <stop offset="0.595" stop-color="${subColor}" />
+          <stop offset="1" stop-color="${mainColor}" />
+        </linearGradient>
+      </defs>
+    </svg>
+  `;
+}

package/src/templates/icons/IconBottomLeft1.ts

@@ -0,0 +1,26 @@
+import { ISvgProps } from "../../interface"; 
+
+export function createIconBottomLeft1({
+  mainColor = "#96A6B4",
+  subColor = "#96A6B4",
+}: ISvgProps): string {
+  return `
+    <div style="width: 100%; height: 100%; isolation: isolate; display: flex; align-items: center; justify-content: center; will-change: transform, contents; transform: translateZ(0); backface-visibility: hidden;">
+      <svg
+        width="100%"
+        height="100%"
+        viewBox="0 0 307 237"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        preserveAspectRatio="xMidYMid meet"
+        style="width: 100%; height: 100%; max-width: 100%; max-height: 100%; z-index: 1; mix-blend-mode: normal; pointer-events: none; display: block;"
+      >
+        <path
+          d="M307 237C291.5 175.491 160.947 185.416 129 139.639C84 62.9997 55.5 8.72737 2.0158e-05 -1.83939e-06L3.05176e-05 237L307 237Z"
+          fill="${mainColor}"
+          fill-opacity="0.9"
+        />
+      </svg>
+    </div>
+  `;
+} 

package/src/templates/icons/IconBottomLeft2.ts

@@ -0,0 +1,40 @@
+import { ISvgProps } from "../../interface"; 
+
+export function createIconBottomLeft2({
+  mainColor = "#96A6B4",
+  subColor = "#96A6B4",
+}: ISvgProps): string {
+  const paintId0 = `paint0_linear_${Math.random().toString(36).substr(2, 9)}`;
+
+  return `
+    <div style="width: 100%; height: 100%; isolation: isolate; display: flex; align-items: center; justify-content: center; will-change: transform, contents; transform: translateZ(0); backface-visibility: hidden;">
+      <svg
+        width="100%"
+        height="100%"
+        viewBox="0 0 307 237"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        preserveAspectRatio="xMidYMid meet"
+        style="width: 100%; height: 100%; max-width: 100%; max-height: 100%; z-index: 1; mix-blend-mode: normal; pointer-events: none; display: block;"
+      >
+        <path
+          d="M307 237C291.5 175.491 160.947 185.416 129 139.639C84 62.9997 55.5 8.72737 2.0158e-05 -1.83939e-06L3.05176e-05 237L307 237Z"
+          fill="url(#${paintId0})"
+        />
+        <defs>
+          <linearGradient
+            id="${paintId0}"
+            x1="153.5"
+            y1="237"
+            x2="153.5"
+            y2="-8.54909e-06"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="${subColor}" />
+            <stop offset="1" stop-color="${mainColor}" />
+          </linearGradient>
+        </defs>
+      </svg>
+    </div>
+  `;
+} 

package/src/templates/icons/IconBottomRight1.ts

@@ -0,0 +1,26 @@
+import { ISvgProps } from "../../interface"; 
+
+export function createIconBottomRight1({
+  mainColor = "#96A6B4",
+  subColor = "#96A6B4",
+}: ISvgProps): string {
+  return `
+    <div style="width: 100%; height: 100%; isolation: isolate; display: flex; align-items: center; justify-content: center; will-change: transform, contents; transform: translateZ(0); backface-visibility: hidden;">
+      <svg
+        width="100%"
+        height="100%"
+        viewBox="0 0 307 237"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        preserveAspectRatio="xMidYMid meet"
+        style="width: 100%; height: 100%; max-width: 100%; max-height: 100%; z-index: 1; mix-blend-mode: normal; pointer-events: none; display: block;"
+      >
+        <path
+          d="M0 237C15.5 175.491 146.053 185.416 178 139.639C223 62.9997 251.5 8.72737 307 -1.83939e-06L307 237L0 237Z"
+          fill="${mainColor}"
+          fill-opacity="0.9"
+        />
+      </svg>
+    </div>
+  `;
+} 

package/src/templates/icons/IconBottomRight2.ts

@@ -0,0 +1,40 @@
+import { ISvgProps } from "../../interface"; 
+
+export function createIconBottomRight2({
+  mainColor = "#96A6B4",
+  subColor = "#96A6B4",
+}: ISvgProps): string {
+  const paintId0 = `paint0_linear_${Math.random().toString(36).substr(2, 9)}`;
+
+  return `
+    <div style="width: 100%; height: 100%; isolation: isolate; display: flex; align-items: center; justify-content: center; will-change: transform, contents; transform: translateZ(0); backface-visibility: hidden;">
+      <svg
+        width="100%"
+        height="100%"
+        viewBox="0 0 297 237"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        preserveAspectRatio="xMidYMid meet"
+        style="width: 100%; height: 100%; max-width: 100%; max-height: 100%; z-index: 1; mix-blend-mode: normal; pointer-events: none; display: block;"
+      >
+        <path
+          d="M0 237C14.9951 175.491 141.296 185.416 172.202 139.639C215.736 62.9997 243.308 8.72737 297 -2.27651e-06L297 237L0 237Z"
+          fill="url(#${paintId0})"
+        />
+        <defs>
+          <linearGradient
+            id="${paintId0}"
+            x1="148.5"
+            y1="237"
+            x2="148.5"
+            y2="-8.76765e-06"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="${subColor}" />
+            <stop offset="1" stop-color="${mainColor}" />
+          </linearGradient>
+        </defs>
+      </svg>
+    </div>
+  `;
+} 

package/src/templates/icons/IconContainer1.ts

@@ -0,0 +1,87 @@
+import { ISvgProps } from "../../interface"; 
+
+export function createIconContainer1({
+  mainColor = "#96A6B4",
+  subColor = "#96A6B4",
+}: ISvgProps): string {
+  const paintId0 = `paint0_linear_${Math.random().toString(36).substr(2, 9)}`;
+
+  return `
+    <div style="width: 100%; height: 100%; isolation: isolate; display: flex; align-items: center; justify-content: center; will-change: transform, contents; transform: translateZ(0); backface-visibility: hidden;">
+      <svg
+        width="100%"
+        height="100%"
+        viewBox="0 0 1047 719"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        preserveAspectRatio="xMidYMid meet"
+        style="width: 100%; height: 100%; max-width: 100%; max-height: 100%; z-index: 1; mix-blend-mode: normal; pointer-events: none; display: block;"
+      >
+        <g filter="url(#filter0_d_2546_427)">
+          <rect
+            x="24.3926"
+            y="24.1572"
+            width="998"
+            height="670"
+            rx="8"
+            fill="white"
+          />
+        </g>
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M997.784 24.1572H973.176V50.1377H24.3926V74.7499H973.176V694.157H997.784V74.7499H1022.39V50.1377H997.784V24.1572Z"
+          fill="url(#${paintId0})"
+        />
+        <defs>
+          <filter
+            id="filter0_d_2546_427"
+            x="0.392578"
+            y="0.157227"
+            width="1046"
+            height="717.999"
+            filterUnits="userSpaceOnUse"
+            color-interpolation-filters="sRGB"
+          >
+            <feFlood flood-opacity="0" result="BackgroundImageFix" />
+            <feColorMatrix
+              in="SourceAlpha"
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+              result="hardAlpha"
+            />
+            <feOffset />
+            <feGaussianBlur stdDeviation="12" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"
+            />
+            <feBlend
+              mode="normal"
+              in2="BackgroundImageFix"
+              result="effect1_dropShadow_2546_427"
+            />
+            <feBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="effect1_dropShadow_2546_427"
+              result="shape"
+            />
+          </filter>
+          <linearGradient
+            id="${paintId0}"
+            x1="413.339"
+            y1="-130.353"
+            x2="792.139"
+            y2="812.39"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stop-color="${mainColor}" />
+            <stop offset="1" stop-color="${subColor}" />
+          </linearGradient>
+        </defs>
+      </svg>
+    </div>
+  `;
+} 

package/src/templates/icons/IconContainer2.ts

@@ -0,0 +1,30 @@
+import { ISvgProps } from "../../interface"; 
+
+export function createIconContainer2({
+  mainColor = "#96A6B4",
+  subColor = "#96A6B4",
+}: ISvgProps): string {
+  return `
+    <div style="width: 100%; height: 100%; isolation: isolate; display: flex; align-items: center; justify-content: center; will-change: transform, contents; transform: translateZ(0); backface-visibility: hidden;">
+      <svg
+        width="100%"
+        height="100%"
+        viewBox="0 0 693 640"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        preserveAspectRatio="xMidYMid meet"
+        style="width: 100%; height: 100%; max-width: 100%; max-height: 100%; z-index: 1; mix-blend-mode: normal; pointer-events: none; display: block;"
+      >
+        <rect
+          x="0.345703"
+          y="0.157227"
+          width="692"
+          height="639"
+          rx="20"
+          fill="${mainColor}"
+          fill-opacity="0.7"
+        />
+      </svg>
+    </div>
+  `;
+}