@blockspoon/cert-badge-renderer 1.0.1

package/README.md

@@ -0,0 +1,92 @@
+# @blockspoon/cert-badge-renderer
+
+칼리지스 디지털 배지 또는 인증서를 HTML 또는 PNG로 렌더링할 수 있는 Node.js 기반 렌더링 도구입니다. Open API와 연결하거나 내부 렌더링 엔진으로 사용할 수 있도록 설계되었습니다.
+
+---
+
+## ✨ 주요 기능
+
+- 인증서 또는 배지 JSON 데이터를 기반으로 HTML 렌더링
+- 인증서 또는 배지를 이미지(png, base64)로 변환
+- 인증서 조회 객체를 그대로 넘겨 변환 가능
+
+---
+
+## ⚡️ 설치 방법
+
+```bash
+npm install @blockspoon/cert-badge-renderer
+```
+
+---
+
+## 📝 사용법 예제
+
+### 1. 인증서 또는 배지 HTML 생성
+
+```ts
+import { generateAchievementHTML } from "@blockspoon/cert-badge-renderer";
+
+// achievement: https://developers.kolleges.net/docs/achievement_get#achievement-object
+const html = await generateAchievementHTML(achievement, {
+  type: "certificate", // 또는 "badge"
+  size: 600, // 렌더링 크기 (px)
+});
+```
+
+### 2. 인증서 또는 배지 PNG 이미지 생성
+
+```ts
+import { generateAchievementFile } from "@blockspoon/cert-badge-renderer";
+
+// achievement: https://developers.kolleges.net/docs/achievement_get#achievement-object
+const result = await generateAchievementFile(achievement, {
+  type: "certificate", // 또는 "badge"
+  size: 600,
+  returnType: "base64", // 또는 "png"
+});
+
+// Base64 저장 예시
+const base64 = result.base64.replace(/^data:image\/png;base64,/, "");
+require("fs").writeFileSync("certificate.png", Buffer.from(base64, "base64"));
+```
+
+### 3. 디자인(JSON) 기반으로 HTML 생성하기
+
+```ts
+import { generateDesignHTML } from "@blockspoon/cert-badge-renderer";
+
+// certificateDesign: https://developers.kolleges.net/docs/design_get_certificate#certificatedesign-object
+// badgeDesign: https://developers.kolleges.net/docs/design_get_badge#badgedesign-object
+const html = await generateDesignHTML(certificateDesign || badgeDesign);
+
+require("fs").writeFileSync("badge.html", html, "utf-8");
+```
+
+### 4. 디자인(JSON) 기반으로 PNG 생성하기
+
+```ts
+import { generateDesignFile } from "@blockspoon/cert-badge-renderer";
+
+// certificateDesign: https://developers.kolleges.net/docs/design_get_certificate#certificatedesign-object
+// badgeDesign: https://developers.kolleges.net/docs/design_get_badge#badgedesign-object
+const png = await generateDesignFile(certificateDesign || badgeDesign);
+
+require("fs").writeFileSync("badge.png", png.buffer);
+```
+
+---
+
+## 🔐 API Key 사용 방식
+
+패키지 사용 시 서버 요청에는 API Key가 필요합니다.  
+이는 인증서 생성 및 검증 요청의 보안을 위한 절차이며,  
+패키지 내부의 Open API 호출 시 자동으로 토큰이 헤더에 포함됩니다.
+
+자세한 정보는 https://developers.kolleges.net 참고 부탁드립니다.
+
+---
+
+## 📣 기여 및 문의
+
+문의는 support@kolleges.net으로 보내주세요!

package/dist/constants/componentsDirection.d.ts

@@ -0,0 +1,2 @@
+export declare const portraitComponents: string[];
+export declare const landscapeComponents: string[];

package/dist/constants/componentsDirection.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.landscapeComponents = exports.portraitComponents = void 0;
+// 세로
+exports.portraitComponents = [
+    "NewCertificateType5",
+    "NewCertificateType6",
+    "NewCertificateType6Single",
+    "NewCertificateType9",
+    "NewCertificateType15",
+    "NewEmptyPortraitCertificate",
+];
+// 가로
+exports.landscapeComponents = [
+    "NewCertificateType1",
+    "NewCertificateType2",
+    "NewCertificateType3",
+    "NewCertificateType4",
+    "NewCertificateType7",
+    "NewCertificateType7Single",
+    "NewCertificateType8",
+    "NewCertificateType10",
+    "NewCertificateType11",
+    "NewCertificateType12",
+    "NewCertificateType13",
+    "NewCertificateType14",
+    "NewCertificateType16",
+    "NewCertificateType17",
+    "NewCertificateType18",
+    "NewCertificateType19",
+    "NewCertificateType20",
+    "NewCertificateType21",
+    "NewCertificateType22",
+    "NewCertificateType23",
+    "NewCertificateType24",
+    "NewCertificateType25",
+    "NewCertificateType26",
+    "NewCertificateType27",
+    "NewCertificateType29",
+    "NewCertificateType30",
+    "NewCertificateType31",
+    "NewCertificateType32",
+    "NewCertificateType33",
+    "NewCertificateType34",
+    "NewEmptyLandscapeCertificate",
+];

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { generateAchievementFile } from './utils/generateAchievementFile';
+export { generateAchievementHTML } from './utils/generateAchievementHTML';
+export type { CertificateData, CertificateOptions } from './interface';

package/dist/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateAchievementHTML = exports.generateAchievementFile = void 0;
+var generateAchievementFile_1 = require("./utils/generateAchievementFile");
+Object.defineProperty(exports, "generateAchievementFile", { enumerable: true, get: function () { return generateAchievementFile_1.generateAchievementFile; } });
+var generateAchievementHTML_1 = require("./utils/generateAchievementHTML");
+Object.defineProperty(exports, "generateAchievementHTML", { enumerable: true, get: function () { return generateAchievementHTML_1.generateAchievementHTML; } });
+// export { getBindingValue } from "./utils/getBindingValue";

package/dist/interface/index.d.ts

@@ -0,0 +1,123 @@
+export interface IKollegeItem {
+    name?: string;
+    images?: any;
+    [key: string]: any;
+}
+export interface IUserItem {
+    name: string;
+    [key: string]: any;
+}
+export interface IAchievementFormItem {
+    achievementCertificateDesign?: IAchievementDesignItem;
+    achievementBadgeDesign?: IAchievementDesignItem;
+    clubInstitutions?: IOrganizationItem[];
+    course_begin_at?: string;
+    course_end_at?: string;
+    description?: string;
+    id?: number;
+    name?: string;
+    tags?: string[];
+    representativeInstitution?: any;
+    representativeInstitutionId?: number;
+    [key: string]: any;
+}
+export interface IAchievementItem {
+    achievementForm: IAchievementFormItem;
+    achievementFormId?: number;
+    admin_comment?: string;
+    certificate_number?: string;
+    course_begin_at?: string;
+    course_end_at?: string;
+    created_at?: string;
+    expiration_date?: string;
+    id?: number;
+    level?: number;
+    user: IUserItem;
+    customAttributes?: {
+        attribute_tag: string;
+        attribute_value: string;
+    }[];
+}
+export interface IOrganizationItem {
+    name?: string;
+    id?: number;
+    images?: any;
+    [key: string]: any;
+}
+export declare enum ACHIEVEMENT_IMAGES {
+    ACHIEVEMENT_FORM = "achievement_form",
+    BADGE_IMAGE = "badge_image"
+}
+export declare enum CERTIFICATE_DESIGN_TYPE {
+    TEMPLATE = "template",
+    BACKGROUND = "background",
+    ICON = "icon",
+    TEXT = "text",
+    IMAGE = "image",
+    PROPS = "props",
+    RIBBON = "ribbon",
+    BADGE = "badge"
+}
+export interface ElementStyle {
+    id: string;
+    controlType: "text" | "image" | "svg" | "line";
+    designType: CERTIFICATE_DESIGN_TYPE;
+    order?: number;
+    text?: string;
+    src?: string;
+    type?: string;
+    bindingKey?: string;
+    fontSize?: number;
+    fontWeight?: string;
+    textAlign?: "left" | "center" | "right";
+    verticalAlign?: "top" | "middle" | "bottom";
+    fontFamily?: string;
+    fontStyle?: string;
+    textDecoration?: string;
+    background?: string;
+    color?: string;
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+    componentName?: string;
+    mainColor?: string;
+    subColor?: string;
+    extraColor1?: string;
+    extraColor2?: string;
+    isVertical?: boolean;
+    lineWidth?: number;
+}
+export interface IAchievementDesignItem {
+    id: number;
+    name: string;
+    main_color: string;
+    sub_color: string;
+    layout_json: ElementStyle[];
+    template_type: string;
+    image: any;
+    extra_color_1: string;
+    extra_color_2: string;
+}
+export interface ISvgProps {
+    mainColor?: string;
+    subColor?: string;
+    extraColor1?: string;
+    extraColor2?: string;
+}
+export interface CertificateData {
+    user: any;
+    kollegeInfo: any;
+    achievementInfo: any;
+}
+export interface CertificateOptions {
+    type?: string;
+    size?: number;
+    returnType?: string;
+    noSpace?: boolean;
+}
+export interface DesignOptions {
+    size?: number;
+    returnType?: string;
+    noSpace?: boolean;
+}

package/dist/interface/index.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CERTIFICATE_DESIGN_TYPE = exports.ACHIEVEMENT_IMAGES = void 0;
+var ACHIEVEMENT_IMAGES;
+(function (ACHIEVEMENT_IMAGES) {
+    ACHIEVEMENT_IMAGES["ACHIEVEMENT_FORM"] = "achievement_form";
+    ACHIEVEMENT_IMAGES["BADGE_IMAGE"] = "badge_image";
+    // AVATAR_IMAGE = "avatar_image",
+})(ACHIEVEMENT_IMAGES || (exports.ACHIEVEMENT_IMAGES = ACHIEVEMENT_IMAGES = {}));
+// 증명서 디자인
+var CERTIFICATE_DESIGN_TYPE;
+(function (CERTIFICATE_DESIGN_TYPE) {
+    CERTIFICATE_DESIGN_TYPE["TEMPLATE"] = "template";
+    CERTIFICATE_DESIGN_TYPE["BACKGROUND"] = "background";
+    CERTIFICATE_DESIGN_TYPE["ICON"] = "icon";
+    CERTIFICATE_DESIGN_TYPE["TEXT"] = "text";
+    CERTIFICATE_DESIGN_TYPE["IMAGE"] = "image";
+    CERTIFICATE_DESIGN_TYPE["PROPS"] = "props";
+    CERTIFICATE_DESIGN_TYPE["RIBBON"] = "ribbon";
+    CERTIFICATE_DESIGN_TYPE["BADGE"] = "badge";
+})(CERTIFICATE_DESIGN_TYPE || (exports.CERTIFICATE_DESIGN_TYPE = CERTIFICATE_DESIGN_TYPE = {}));

package/dist/templates/badges/BadgeType1.d.ts

@@ -0,0 +1,2 @@
+import { ISvgProps } from "../../interface";
+export declare function createBadgeType1({ mainColor, subColor, }: ISvgProps): string;

package/dist/templates/badges/BadgeType1.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createBadgeType1 = createBadgeType1;
+function createBadgeType1({ mainColor = "#96A6B4", subColor = "#96A6B4", }) {
+    const paintId0 = `paint0_linear_${Math.random().toString(36).substr(2, 9)}`;
+    return `
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 496 496"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMidYMid meet"
+      style={{
+        width: "100%",
+        height: "100%",
+        objectFit: "contain",
+        position: "absolute",
+        left: "50%",
+        top: "50%",
+        transform: "translate(-50%, -50%)",
+        maxWidth: "100%",
+        maxHeight: "100%",
+        zIndex: 1,
+        mixBlendMode: "normal",
+        pointerEvents: "none",
+        display: "block",
+      }}
+    >
+      <path
+        d="M260.835 12.7755L291.197 2.18051C306.272 -3.09063 323.087 1.38984 333.524 13.5135L354.503 37.8661C360.249 44.5605 368.103 49.0936 376.748 50.7277L408.322 56.6841C424.03 59.6359 436.311 71.9704 439.316 87.6784L445.272 119.252C446.906 127.897 451.44 135.751 458.134 141.497L482.487 162.476C494.61 172.913 499.091 189.728 493.819 204.803L483.224 235.165C480.325 243.493 480.325 252.56 483.224 260.835L493.819 291.197C499.091 306.272 494.61 323.087 482.487 333.524L458.134 354.503C451.44 360.249 446.906 368.103 445.272 376.748L439.316 408.322C436.364 424.03 424.03 436.311 408.322 439.316L376.748 445.272C368.103 446.906 360.249 451.44 354.503 458.134L333.524 482.487C323.087 494.61 306.272 499.091 291.197 493.819L260.835 483.224C252.507 480.325 243.44 480.325 235.165 483.224L204.803 493.819C189.728 499.091 172.913 494.61 162.476 482.487L141.497 458.134C135.751 451.44 127.897 446.906 119.252 445.272L87.6784 439.316C71.9704 436.364 59.6886 424.03 56.6841 408.322L50.7277 376.748C49.0936 368.103 44.5605 360.249 37.8661 354.503L13.5135 333.524C1.38984 323.087 -3.09063 306.272 2.18051 291.197L12.7755 260.835C15.6746 252.507 15.6746 243.44 12.7755 235.165L2.18051 204.803C-3.09063 189.728 1.38984 172.913 13.5135 162.476L37.8661 141.497C44.5605 135.751 49.0936 127.897 50.7277 119.252L56.6841 87.6784C59.6359 71.9704 71.9704 59.6886 87.6784 56.6841L119.252 50.7277C127.897 49.0936 135.751 44.5605 141.497 37.8661L162.476 13.5135C172.913 1.38984 189.728 -3.09063 204.803 2.18051L235.165 12.7755C243.493 15.6746 252.56 15.6746 260.835 12.7755Z"
+        fill="${mainColor}"
+      />
+      <path
+        d="M260.266 23.2088L289.281 13.0838C303.688 8.04646 319.757 12.3282 329.731 23.9141L349.779 47.1866C355.27 53.584 362.776 57.9161 371.037 59.4777L401.211 65.1699C416.222 67.9908 427.959 79.7781 430.83 94.7894L436.522 124.963C438.084 133.224 442.416 140.73 448.813 146.221L472.086 166.269C483.672 176.243 487.954 192.312 482.916 206.719L472.791 235.734C470.021 243.693 470.021 252.357 472.791 260.266L482.916 289.281C487.954 303.688 483.672 319.757 472.086 329.731L448.813 349.779C442.416 355.27 438.084 362.776 436.522 371.037L430.83 401.211C428.009 416.222 416.222 427.959 401.211 430.83L371.037 436.522C362.776 438.084 355.27 442.416 349.779 448.813L329.731 472.086C319.757 483.672 303.688 487.954 289.281 482.916L260.266 472.791C252.307 470.021 243.643 470.021 235.734 472.791L206.719 482.916C192.312 487.954 176.243 483.672 166.269 472.086L146.221 448.813C140.73 442.416 133.224 438.084 124.963 436.522L94.7894 430.83C79.7781 428.009 68.0411 416.222 65.1699 401.211L59.4777 371.037C57.9161 362.776 53.584 355.27 47.1866 349.779L23.9141 329.731C12.3282 319.757 8.04646 303.688 13.0838 289.281L23.2088 260.266C25.9794 252.307 25.9794 243.643 23.2088 235.734L13.0838 206.719C8.04646 192.312 12.3282 176.243 23.9141 166.269L47.1866 146.221C53.584 140.73 57.9161 133.224 59.4777 124.963L65.1699 94.7894C67.9908 79.7781 79.7781 68.0411 94.7894 65.1699L124.963 59.4777C133.224 57.9161 140.73 53.584 146.221 47.1866L166.269 23.9141C176.243 12.3282 192.312 8.04646 206.719 13.0838L235.734 23.2088C243.693 25.9794 252.357 25.9794 260.266 23.2088Z"
+        fill="${subColor}"
+      />
+      <path
+        d="M287.695 24.931L287.694 24.9312L260.027 34.586C252.271 37.3031 243.776 37.3024 235.975 34.5866L235.974 34.5864L208.306 24.9312L208.305 24.931C194.954 20.2629 180.063 24.2312 170.82 34.9671L170.82 34.9674L151.703 57.1583C146.32 63.4312 138.96 67.679 130.859 69.2103L130.859 69.2103L102.088 74.6378C102.088 74.6379 102.087 74.638 102.087 74.6381C88.1732 77.3001 77.2518 88.1785 74.6384 102.085L74.6383 102.086L69.2103 130.859L69.2103 130.859C67.679 138.96 63.4312 146.32 57.1583 151.703L34.9674 170.82L34.9671 170.82C24.2312 180.063 20.2629 194.954 24.931 208.305L24.9312 208.306L34.586 235.973C37.3031 243.729 37.3024 252.224 34.5866 260.025L34.5864 260.026L24.9312 287.694L24.931 287.695C20.2629 301.046 24.2312 315.937 34.9671 325.18L34.9674 325.18L57.1583 344.297L287.695 24.931ZM287.695 24.931C301.046 20.2629 315.937 24.2312 325.18 34.9671L325.18 34.9674M287.695 24.931L325.18 34.9674M325.18 34.9674L344.297 57.1583L325.18 34.9674ZM365.141 69.2103L365.141 69.2103C357.041 67.6791 349.682 63.4319 344.298 57.1597L365.141 69.2103ZM365.141 69.2103L393.914 74.6383L393.915 74.6384M365.141 69.2103L393.915 74.6384M393.915 74.6384C407.822 77.2519 418.701 88.1739 421.362 102.088L426.79 130.859L426.79 130.859L393.915 74.6384ZM461.033 170.82L461.033 170.82L438.842 151.703C438.841 151.703 438.841 151.703 438.84 151.702L438.84 151.702L439.493 150.945L461.033 170.82ZM461.033 170.82C471.769 180.063 475.737 194.954 471.069 208.305L471.069 208.306M461.033 170.82L471.069 208.306M471.069 208.306L461.414 235.974L461.413 235.975M471.069 208.306L461.413 235.975M461.413 235.975C458.698 243.776 458.697 252.271 461.414 260.027L471.069 287.694L471.069 287.695M461.413 235.975L471.069 287.695M471.069 287.695C475.737 301.046 471.769 315.937 461.033 325.18L461.033 325.18M471.069 287.695L461.033 325.18M461.033 325.18L438.842 344.297L461.033 325.18ZM426.79 365.141L426.79 365.141C428.321 357.041 432.568 349.682 438.84 344.298L426.79 365.141ZM426.79 365.141L421.362 393.914L421.362 393.915M426.79 365.141L421.362 393.915M421.362 393.915C418.748 407.822 407.826 418.701 393.912 421.362L365.141 426.79L365.141 426.79M421.362 393.915L365.141 426.79M365.141 426.79C357.041 428.321 349.682 432.568 344.298 438.84L365.141 426.79ZM325.18 461.033L325.18 461.033L344.297 438.842L325.18 461.033ZM325.18 461.033C315.937 471.769 301.046 475.737 287.695 471.069L287.694 471.069M325.18 461.033L287.694 471.069M287.694 471.069L260.026 461.414L260.025 461.413M287.694 471.069L260.025 461.413M260.025 461.413C252.224 458.698 243.729 458.697 235.973 461.414L208.306 471.069L208.305 471.069M260.025 461.413L208.305 471.069M208.305 471.069C194.954 475.737 180.063 471.769 170.82 461.033L170.82 461.033M208.305 471.069L170.82 461.033M170.82 461.033L151.703 438.842L170.82 461.033ZM130.859 426.79L130.859 426.79C138.96 428.321 146.319 432.568 151.702 438.84L151.702 438.84L130.859 426.79ZM130.859 426.79L102.086 421.362L102.085 421.362M130.859 426.79L102.085 421.362M102.085 421.362C88.178 418.748 77.2993 407.826 74.6378 393.912L69.2103 365.141L69.2103 365.141M102.085 421.362L69.2103 365.141M69.2103 365.141C67.6791 357.041 63.4319 349.682 57.1597 344.298L69.2103 365.141Z"
+        stroke="${mainColor}"
+        stroke-width="2"
+      />
+    </svg>
+  `;
+}

package/dist/templates/badges/BadgeType10.d.ts

@@ -0,0 +1,2 @@
+import { ISvgProps } from "../../interface";
+export declare function createBadgeType10({ mainColor, subColor, }: ISvgProps): string;

package/dist/templates/badges/BadgeType10.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createBadgeType10 = createBadgeType10;
+function createBadgeType10({ mainColor = "#96A6B4", subColor = "#96A6B4", }) {
+    const paintId0 = `paint0_linear_${Math.random().toString(36).substr(2, 9)}`;
+    return `
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 488 488"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMidYMid meet"
+      style="
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        max-width: 100%;
+        max-height: 100%;
+        z-index: 1;
+        mix-blend-mode: normal;
+        pointer-events: none;
+        display: block;
+      "
+    >
+      <path
+        d="M244 0C109.25 0 0 109.25 0 244C0 378.75 109.25 488 244 488C378.75 488 488 378.75 488 244V20C488 8.95431 479.046 0 468 0H244Z"
+        fill="url(#${paintId0})"
+      />
+      <circle cx="244" cy="250" r="220" fill="black" fill-opacity="0.2" />
+      <circle cx="244" cy="244" r="214" fill="${mainColor}" />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M453.679 201H34.3223C54.2274 103.42 140.54 30 244.001 30C347.462 30 433.774 103.42 453.679 201Z"
+        fill="white"
+      />
+      <circle cx="244" cy="244" r="212" stroke="white" stroke-width="4" />
+      <mask
+        id="mask0_2384_135"
+        style="mask-type:alpha"
+        maskUnits="userSpaceOnUse"
+        x="34"
+        y="34"
+        width="420"
+        height="420"
+      >
+        <circle cx="244" cy="244" r="210" fill="${mainColor}" />
+      </mask>
+      <g mask="url(#mask0_2384_135)">
+        <rect x="25" y="201" width="440" height="140" fill="${subColor}" />
+        <rect
+          x="25"
+          y="201"
+          width="440"
+          height="140"
+          fill="white"
+          fill-opacity="0.3"
+        />
+      </g>
+      <defs>
+        <linearGradient
+          id="${paintId0}"
+          x1="244"
+          y1="0"
+          x2="244"
+          y2="488"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="${mainColor}" />
+          <stop offset="1" stop-color="${subColor}" />
+        </linearGradient>
+      </defs>
+    </svg>
+  `;
+}

package/dist/templates/badges/BadgeType11.d.ts

@@ -0,0 +1,2 @@
+import { ISvgProps } from "../../interface";
+export declare function createBadgeType11({ mainColor, subColor, }: ISvgProps): string;

package/dist/templates/badges/BadgeType11.js

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createBadgeType11 = createBadgeType11;
+function createBadgeType11({ mainColor = "#96A6B4", subColor = "#96A6B4", }) {
+    return `
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 540 560"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMidYMid meet"
+      style="
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
+        max-width: 100%;
+        max-height: 100%;
+        z-index: 1;
+        mix-blend-mode: normal;
+        pointer-events: none;
+        display: block;
+      "
+    >
+      <g filter="url(#filter0_d_2384_1366)">
+        <path
+          d="M270 12C412.398 12 528 132.083 528 280V507.484C528 529.843 510.52 548 488.996 548H51.0041C29.4795 548 12 529.843 12 507.484V280C12 132.083 127.602 12 270 12Z"
+          fill="white"
+        />
+      </g>
+      <path
+        d="M270 28C404.119 28 513 140.914 513 280V493.903C513 514.927 496.537 532 476.264 532H63.7364C43.4633 532 27 514.927 27 493.903V280C27 140.914 135.881 28 270 28Z"
+        fill="${subColor}"
+      />
+      <path
+        d="M270 40C397.495 40 501 147.537 501 280V483.717C501 503.74 485.35 520 466.078 520H73.9223C54.6503 520 39 503.74 39 483.717V280C39 147.537 142.505 40 270 40Z"
+        fill="${subColor}"
+      />
+      <path
+        d="M270 40C397.495 40 501 147.537 501 280V483.717C501 503.74 485.35 520 466.078 520H73.9223C54.6503 520 39 503.74 39 483.717V280C39 147.537 142.505 40 270 40Z"
+        fill="${mainColor}"
+      />
+      <rect
+        x="42.9902"
+        y="316"
+        width="454.018"
+        height="153"
+        fill="${subColor}"
+      />
+      <path
+        d="M42.9902 324L496.982 324"
+        stroke="${mainColor}"
+        stroke-width="4"
+      />
+      <path
+        d="M42.9902 461L496.982 461"
+        stroke="${mainColor}"
+        stroke-width="4"
+      />
+      <path
+        d="M270 43C395.732 43 498 149.085 498 280V483.717C498 502.192 483.586 517 466.078 517H73.9223C56.4141 517 42 502.192 42 483.717V280C42 149.085 144.268 43 270 43Z"
+        stroke="white"
+        stroke-width="6"
+      />
+      <defs>
+        <filter
+          id="filter0_d_2384_1366"
+          x="0"
+          y="0"
+          width="540"
+          height="560"
+          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="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_1366"
+          />
+          <feBlend
+            mode="normal"
+            in="SourceGraphic"
+            in2="effect1_dropShadow_2384_1366"
+            result="shape"
+          />
+        </filter>
+      </defs>
+    </svg>
+  `;
+}

package/dist/templates/badges/BadgeType12.d.ts

@@ -0,0 +1,2 @@
+import { ISvgProps } from "../../interface";
+export declare function createBadgeType12({ mainColor, subColor, }: ISvgProps): string;

package/dist/templates/badges/BadgeType12.js

@@ -0,0 +1,93 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createBadgeType12 = createBadgeType12;
+function createBadgeType12({ mainColor = "#96A6B4", subColor = "#96A6B4", }) {
+    const paintId0 = `paint0_linear_${Math.random().toString(36).substr(2, 9)}`;
+    return `
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 482 536"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      preserveAspectRatio="xMidYMid meet"
+      style="
+        max-width: 100%;
+        max-height: 100%;
+        mix-blend-mode: normal;
+        pointer-events: none;
+        display: block;
+      "
+    >
+      <path
+        d="M450.988 111.337L272.058 8.29407C252.853 -2.76469 229.184 -2.76469 209.979 8.29407L31.0301 111.337C11.8254 122.396 0 142.839 0 164.957V371.043C0 393.161 11.8254 413.604 31.0301 424.663L209.961 527.706C229.165 538.765 252.835 538.765 272.039 527.706L450.97 424.663C470.175 413.604 482 393.161 482 371.043V164.957C482 142.839 470.175 122.396 450.97 111.337H450.988Z"
+        fill="url(#${paintId0})"
+      />
+      <path
+        d="M437.047 120.69L269.996 23.7989C252.066 13.4004 229.968 13.4004 212.039 23.7989L44.97 120.69C27.0403 131.089 16 150.311 16 171.109V364.891C16 385.689 27.0403 404.911 44.97 415.31L212.021 512.201C229.951 522.6 252.049 522.6 269.979 512.201L437.03 415.31C454.96 404.911 466 385.689 466 364.891V171.109C466 150.311 454.96 131.089 437.03 120.69H437.047Z"
+        fill="white"
+      />
+      <mask
+        id="mask0_2384_1368"
+        style="mask-type:alpha"
+        maskUnits="userSpaceOnUse"
+        x="16"
+        y="16"
+        width="450"
+        height="504"
+      >
+        <path
+          d="M437.047 120.69L269.996 23.7989C252.066 13.4004 229.968 13.4004 212.039 23.7989L44.97 120.69C27.0403 131.089 16 150.311 16 171.109V364.891C16 385.688 27.0403 404.911 44.97 415.31L212.021 512.201C229.951 522.6 252.049 522.6 269.979 512.201L437.03 415.31C454.96 404.911 466 385.688 466 364.891V171.109C466 150.311 454.96 131.089 437.03 120.69H437.047Z"
+          fill="white"
+        />
+      </mask>
+      <g mask="url(#mask0_2384_1368)">
+        <path
+          d="M76.1199 392.133C79.0337 391.549 82.061 392.07 84.6146 393.595L123.978 417.094C127.082 418.947 126.337 423.643 122.814 424.438L105.997 428.23C103.069 428.89 99.9984 428.426 97.3934 426.929L56.2327 403.275C53.0301 401.435 53.8144 396.603 57.4334 395.878L76.1199 392.133Z"
+          fill="${subColor}"
+        />
+        <path
+          d="M207.775 447.375C211.464 446.6 215.31 447.155 218.633 448.944L296.754 490.994C298.696 492.04 299.428 494.461 298.39 496.408L266.762 555.695C265.723 557.642 263.305 558.377 261.357 557.338L108.104 475.542C104.807 473.783 105.503 468.861 109.158 468.093L207.775 447.375Z"
+          fill="${subColor}"
+        />
+        <path
+          d="M278.79 447.747C283.458 446.493 288.423 446.976 292.766 449.106L396.584 500.03C398.566 501.002 399.388 503.396 398.422 505.38L380.7 541.778C379.713 543.805 377.247 544.614 375.25 543.565L231.051 467.759C227.828 466.065 228.354 461.294 231.868 460.35L278.79 447.747Z"
+          fill="${mainColor}"
+        />
+        <path
+          d="M226.814 487.424C231.45 486.183 236.379 486.654 240.7 488.751L353.818 543.659C355.809 544.626 356.639 547.027 355.67 549.017L337.936 585.44C336.956 587.452 334.518 588.267 332.526 587.247L177.418 507.871C174.156 506.201 174.662 501.387 178.199 500.44L226.814 487.424Z"
+          fill="${mainColor}"
+        />
+        <path
+          d="M126.166 398.35C129.06 397.662 132.107 398.076 134.715 399.512L190.893 430.441C194.12 432.218 193.439 437.048 189.847 437.855L162.424 444.017C159.615 444.648 156.672 444.246 154.133 442.884L97.3216 412.401C94.0781 410.661 94.7027 405.829 98.2812 404.978L126.166 398.35Z"
+          fill="${mainColor}"
+        />
+        <path
+          d="M303.158 403.333C305.954 402.448 308.978 402.62 311.657 403.816L368.67 429.259C371.722 430.62 371.862 434.904 368.907 436.457L348.357 447.26C343.692 449.713 338.116 449.705 333.453 447.239L278.617 418.244C275.478 416.584 275.891 411.96 279.274 410.889L303.158 403.333Z"
+          fill="${subColor}"
+        />
+        <path
+          d="M401.255 411.977C402.139 411.646 403.111 411.638 404 411.955L455.475 430.318C458.401 431.362 459.076 435.199 456.681 437.176L444.606 447.143C443.433 448.111 441.813 448.329 440.425 447.705L388.144 424.205C384.885 422.74 385.03 418.061 388.373 416.808L401.255 411.977Z"
+          fill="${subColor}"
+        />
+      </g>
+      <path
+        d="M268.713 31.9834L428.224 124.867H428.208L429.808 125.799C446.946 135.777 457.5 154.224 457.5 174.184V361.816C457.5 381.776 446.946 400.223 429.808 410.201L268.697 504.017C251.56 513.994 230.44 513.994 213.303 504.017L52.1916 410.201C35.0545 400.223 24.5 381.776 24.5 361.816V174.184C24.5 154.224 35.0545 135.777 52.1916 125.799L213.32 31.9834C230.457 22.0055 251.577 22.0055 268.713 31.9834Z"
+        stroke="${mainColor}"
+      />
+      <defs>
+        <linearGradient
+          id="${paintId0}"
+          x1="241"
+          y1="0"
+          x2="241"
+          y2="536"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="${subColor}" />
+          <stop offset="1" stop-color="${mainColor}" />
+        </linearGradient>
+      </defs>
+    </svg>
+  `;
+}

package/dist/templates/badges/BadgeType13.d.ts

@@ -0,0 +1,2 @@
+import { ISvgProps } from "../../interface";
+export declare function createBadgeType13({ mainColor, subColor, }: ISvgProps): string;