feat: add attributes in vue generators (#48)

* feat: add attributes in vue generators * chore: changeset
daangn · Jul 4, 2024 · 9f9452e · 9f9452e
1 parent a0c2d33
commit 9f9452e
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 2 deletions.
diff --git a/.changeset/long-eggs-cough.md 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
@@ -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
@@ -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
@@ -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 {