From 9f9452ed6feb71d76273ba1145e05ed07fb83d7a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=A0=95=ED=98=84=EC=88=98?=
 <54893898+junghyeonsu@users.noreply.github.com>
Date: Thu, 4 Jul 2024 12:47:28 +0900
Subject: [PATCH] feat: add attributes in vue generators (#48)

* feat: add attributes in vue generators

* chore: changeset
---
 .changeset/long-eggs-cough.md       | 6 ++++++
 packages/generator/src/core/vue2.ts | 7 ++++++-
 packages/generator/src/core/vue3.ts | 7 ++++++-
 packages/types/src/lib.d.ts         | 4 ++++
 4 files changed, 22 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/long-eggs-cough.md

diff --git a/.changeset/long-eggs-cough.md b/.changeset/long-eggs-cough.md
new file mode 100644
index 0000000..b98ebc1
--- /dev/null
+++ b/.changeset/long-eggs-cough.md
@@ -0,0 +1,6 @@
+---
+"@icona/generator": patch
+"@icona/types": patch
+---
+
+Add attributes in vue generators
diff --git a/packages/generator/src/core/vue2.ts b/packages/generator/src/core/vue2.ts
index 78f3d47..873c743 100644
--- a/packages/generator/src/core/vue2.ts
+++ b/packages/generator/src/core/vue2.ts
@@ -68,7 +68,7 @@ const createShimFile = async (targetPath: string) => {
 export const generateVue2 = async (props: Props) => {
   const { config, icons = getIconaIconsFile() } = props;
   const targetPath = getTargetPath(config.path || "vue2");
-  const { genShimFile, genIndexFile } = config;
+  const { genShimFile, genIndexFile, attributes } = config;
   const componentNames = [];
 
   if (!icons) {
@@ -100,8 +100,13 @@ export const generateVue2 = async (props: Props) => {
     const svgPath = resolve(targetPath, `${componentName}.vue`);
     componentNames.push(componentName);
 
+    const attributesString = Object.entries(attributes || {})
+      .map(([key, value]) => `${key}="${value}"`)
+      .join(" ");
+
     // SVG 파일 내용을 Vue 컴포넌트로 변환
     const convertedSvg = svg
+      .replace(/<svg/, `<svg ${attributesString}`)
       .replace(/width="([^"]+)"/, ':width="size"')
       .replace(/height="([^"]+)"/, ':height="size"');
 
diff --git a/packages/generator/src/core/vue3.ts b/packages/generator/src/core/vue3.ts
index 9ea4f66..3beaeeb 100644
--- a/packages/generator/src/core/vue3.ts
+++ b/packages/generator/src/core/vue3.ts
@@ -72,7 +72,7 @@ const createShimFile = async (targetPath: string) => {
 export const generateVue3 = async (props: Props) => {
   const { config, icons = getIconaIconsFile() } = props;
   const targetPath = getTargetPath(config.path || "vue3");
-  const { genShimFile, genIndexFile } = config;
+  const { genShimFile, genIndexFile, attributes } = config;
   const componentNames = [];
   if (!icons) {
     throw new Error("There is no icons data");
@@ -103,8 +103,13 @@ export const generateVue3 = async (props: Props) => {
     const svgPath = resolve(targetPath, `${componentName}.vue`);
     componentNames.push(componentName);
 
+    const attributesString = Object.entries(attributes || {})
+      .map(([key, value]) => `${key}="${value}"`)
+      .join(" ");
+
     // SVG 파일 내용을 Vue 컴포넌트로 변환
     const convertedSvg = svg
+      .replace(/<svg/, `<svg ${attributesString}`)
       .replace(/width="([^"]+)"/, ':width="size"')
       .replace(/height="([^"]+)"/, ':height="size"');
 
diff --git a/packages/types/src/lib.d.ts b/packages/types/src/lib.d.ts
index 3746ffc..90c1f85 100644
--- a/packages/types/src/lib.d.ts
+++ b/packages/types/src/lib.d.ts
@@ -119,12 +119,16 @@ export interface Vue2Config extends BaseConfig {
   genShimFile?: boolean;
 
   genIndexFile?: boolean;
+
+  attributes?: Record<string, string>;
 }
 
 export interface Vue3Config extends BaseConfig {
   genShimFile?: boolean;
 
   genIndexFile?: boolean;
+
+  attributes?: Record<string, string>;
 }
 
 export interface IconaConfig {