vectify 2.0.2 → 2.0.4

package/dist/{chunk-XHYCGABW.mjs → chunk-GY4VNET5.mjs}

@@ -135,6 +135,10 @@ function getVueTemplatePath(typescript, type) {
   const suffix = typescript ? "ts" : "js";
   return `vue/${type}.${suffix}.vue.hbs`;
 }
+function getVue2TemplatePath(typescript, type) {
+  const suffix = typescript ? "ts" : "js";
+  return `vue2/${type}.${suffix}.vue.hbs`;
+}
 function getSvelteTemplatePath(typescript, type) {
   const suffix = typescript ? "ts" : "js";
   return `svelte/${type}.${suffix}.svelte.hbs`;
@@ -324,6 +328,21 @@ function generateVueIcon(typescript) {
   return renderTemplate(templatePath, { typescript });
 }
 
+// src/generators/vue2.ts
+function generateVue2Component(componentName, iconNode, typescript) {
+  const formattedNodes = iconNode.map((node) => formatIconNode(node, 4)).join(",\n");
+  const templatePath = getVue2TemplatePath(typescript, "component");
+  return renderTemplate(templatePath, {
+    typescript,
+    componentName,
+    formattedNodes
+  });
+}
+function generateVue2Icon(typescript) {
+  const templatePath = getVue2TemplatePath(typescript, "icon");
+  return renderTemplate(templatePath, { typescript });
+}
+
 // src/generators/framework-strategy.ts
 var ReactStrategy = class {
   constructor() {
@@ -365,6 +384,26 @@ var VueStrategy = class {
     };
   }
 };
+var Vue2Strategy = class {
+  constructor() {
+    this.name = "vue2";
+    this.getComponentExtension = (_typescript) => {
+      return "vue";
+    };
+    this.getIndexExtension = (typescript) => {
+      return typescript ? "ts" : "js";
+    };
+    this.generateComponent = (componentName, iconNode, typescript) => {
+      return generateVue2Component(componentName, iconNode, typescript);
+    };
+    this.generateBaseComponent = (typescript) => {
+      return {
+        code: generateVue2Icon(typescript),
+        fileName: "Icon.vue"
+      };
+    };
+  }
+};
 var SvelteStrategy = class {
   constructor() {
     this.name = "svelte";
@@ -509,6 +548,7 @@ var FrameworkRegistry = class {
     this.strategies = /* @__PURE__ */ new Map();
     this.register(new ReactStrategy());
     this.register(new VueStrategy());
+    this.register(new Vue2Strategy());
     this.register(new SvelteStrategy());
     this.register(new SolidStrategy());
     this.register(new PreactStrategy());
@@ -872,7 +912,7 @@ async function generateIndexFile(svgFiles, config, dryRun = false) {
   const typescript = config.typescript ?? true;
   const strategy = getFrameworkStrategy(config.framework);
   const ext = strategy.getIndexExtension(typescript);
-  const usesDefaultExport = ["vue", "svelte", "react", "preact"].includes(config.framework);
+  const usesDefaultExport = ["vue", "vue2", "svelte", "react", "preact"].includes(config.framework);
   const exports = svgFiles.map((svgFile) => {
     const fileName = path4.basename(svgFile);
     const componentName = getComponentName(
@@ -1231,6 +1271,16 @@ Note: Project root detected at ${chalk2.cyan(projectRoot)}`));
         message: "Which framework are you using?",
         choices: frameworkChoices
       },
+      {
+        type: "list",
+        name: "vueVersion",
+        message: "Which Vue version?",
+        choices: [
+          { name: "Vue 3", value: "vue" },
+          { name: "Vue 2", value: "vue2" }
+        ],
+        when: (answers2) => answers2.framework === "vue"
+      },
       {
         type: "input",
         name: "input",
@@ -1276,7 +1326,8 @@ Note: Project root detected at ${chalk2.cyan(projectRoot)}`));
     await ensureDir(outputPath);
     spinner.succeed(`Created output directory: ${chalk2.cyan(answers.output)}`);
     const relativeConfigDir = path5.relative(configDir, projectRoot) || ".";
-    const configContent = generateConfigContent(answers, relativeConfigDir);
+    const finalFramework = answers.vueVersion || answers.framework;
+    const configContent = generateConfigContent({ ...answers, framework: finalFramework }, relativeConfigDir);
     spinner.start("Creating config file...");
     await writeFile(configPath, configContent);
     spinner.succeed(`Config file created at ${chalk2.green(configPath)}`);

package/dist/cli.js

@@ -276,6 +276,10 @@ function getVueTemplatePath(typescript, type) {
   const suffix = typescript ? "ts" : "js";
   return `vue/${type}.${suffix}.vue.hbs`;
 }
+function getVue2TemplatePath(typescript, type) {
+  const suffix = typescript ? "ts" : "js";
+  return `vue2/${type}.${suffix}.vue.hbs`;
+}
 function getSvelteTemplatePath(typescript, type) {
   const suffix = typescript ? "ts" : "js";
   return `svelte/${type}.${suffix}.svelte.hbs`;
@@ -465,6 +469,21 @@ function generateVueIcon(typescript) {
   return renderTemplate(templatePath, { typescript });
 }
 
+// src/generators/vue2.ts
+function generateVue2Component(componentName, iconNode, typescript) {
+  const formattedNodes = iconNode.map((node) => formatIconNode(node, 4)).join(",\n");
+  const templatePath = getVue2TemplatePath(typescript, "component");
+  return renderTemplate(templatePath, {
+    typescript,
+    componentName,
+    formattedNodes
+  });
+}
+function generateVue2Icon(typescript) {
+  const templatePath = getVue2TemplatePath(typescript, "icon");
+  return renderTemplate(templatePath, { typescript });
+}
+
 // src/generators/framework-strategy.ts
 var ReactStrategy = class {
   constructor() {
@@ -506,6 +525,26 @@ var VueStrategy = class {
     };
   }
 };
+var Vue2Strategy = class {
+  constructor() {
+    this.name = "vue2";
+    this.getComponentExtension = (_typescript) => {
+      return "vue";
+    };
+    this.getIndexExtension = (typescript) => {
+      return typescript ? "ts" : "js";
+    };
+    this.generateComponent = (componentName, iconNode, typescript) => {
+      return generateVue2Component(componentName, iconNode, typescript);
+    };
+    this.generateBaseComponent = (typescript) => {
+      return {
+        code: generateVue2Icon(typescript),
+        fileName: "Icon.vue"
+      };
+    };
+  }
+};
 var SvelteStrategy = class {
   constructor() {
     this.name = "svelte";
@@ -650,6 +689,7 @@ var FrameworkRegistry = class {
     this.strategies = /* @__PURE__ */ new Map();
     this.register(new ReactStrategy());
     this.register(new VueStrategy());
+    this.register(new Vue2Strategy());
     this.register(new SvelteStrategy());
     this.register(new SolidStrategy());
     this.register(new PreactStrategy());
@@ -1012,7 +1052,7 @@ async function generateIndexFile(svgFiles, config, dryRun = false) {
   const typescript = config.typescript ?? true;
   const strategy = getFrameworkStrategy(config.framework);
   const ext = strategy.getIndexExtension(typescript);
-  const usesDefaultExport = ["vue", "svelte", "react", "preact"].includes(config.framework);
+  const usesDefaultExport = ["vue", "vue2", "svelte", "react", "preact"].includes(config.framework);
   const exports2 = svgFiles.map((svgFile) => {
     const fileName = import_node_path4.default.basename(svgFile);
     const componentName = getComponentName(
@@ -1370,6 +1410,16 @@ Note: Project root detected at ${import_chalk2.default.cyan(projectRoot)}`));
         message: "Which framework are you using?",
         choices: frameworkChoices
       },
+      {
+        type: "list",
+        name: "vueVersion",
+        message: "Which Vue version?",
+        choices: [
+          { name: "Vue 3", value: "vue" },
+          { name: "Vue 2", value: "vue2" }
+        ],
+        when: (answers2) => answers2.framework === "vue"
+      },
       {
         type: "input",
         name: "input",
@@ -1415,7 +1465,8 @@ Note: Project root detected at ${import_chalk2.default.cyan(projectRoot)}`));
     await ensureDir(outputPath);
     spinner.succeed(`Created output directory: ${import_chalk2.default.cyan(answers.output)}`);
     const relativeConfigDir = import_node_path5.default.relative(configDir, projectRoot) || ".";
-    const configContent = generateConfigContent(answers, relativeConfigDir);
+    const finalFramework = answers.vueVersion || answers.framework;
+    const configContent = generateConfigContent({ ...answers, framework: finalFramework }, relativeConfigDir);
     spinner.start("Creating config file...");
     await writeFile(configPath, configContent);
     spinner.succeed(`Config file created at ${import_chalk2.default.green(configPath)}`);

package/dist/cli.mjs

@@ -3,7 +3,7 @@ import {
   generate,
   init,
   watch
-} from "./chunk-XHYCGABW.mjs";
+} from "./chunk-GY4VNET5.mjs";
 import "./chunk-CIKTK6HI.mjs";
 
 // src/cli.ts

package/dist/index.d.mts

@@ -53,7 +53,7 @@ interface IconProps {
 /**
  * Framework types supported
  */
-type Framework = 'react' | 'vue' | 'svelte' | 'solid' | 'preact' | 'lit' | 'angular' | 'qwik' | 'astro' | 'vanilla';
+type Framework = 'react' | 'vue' | 'vue2' | 'svelte' | 'solid' | 'preact' | 'lit' | 'angular' | 'qwik' | 'astro' | 'vanilla';
 /**
  * Formatter tool types
  */

package/dist/index.d.ts

@@ -53,7 +53,7 @@ interface IconProps {
 /**
  * Framework types supported
  */
-type Framework = 'react' | 'vue' | 'svelte' | 'solid' | 'preact' | 'lit' | 'angular' | 'qwik' | 'astro' | 'vanilla';
+type Framework = 'react' | 'vue' | 'vue2' | 'svelte' | 'solid' | 'preact' | 'lit' | 'angular' | 'qwik' | 'astro' | 'vanilla';
 /**
  * Formatter tool types
  */

package/dist/index.js

@@ -284,6 +284,10 @@ function getVueTemplatePath(typescript, type) {
   const suffix = typescript ? "ts" : "js";
   return `vue/${type}.${suffix}.vue.hbs`;
 }
+function getVue2TemplatePath(typescript, type) {
+  const suffix = typescript ? "ts" : "js";
+  return `vue2/${type}.${suffix}.vue.hbs`;
+}
 function getSvelteTemplatePath(typescript, type) {
   const suffix = typescript ? "ts" : "js";
   return `svelte/${type}.${suffix}.svelte.hbs`;
@@ -473,6 +477,21 @@ function generateVueIcon(typescript) {
   return renderTemplate(templatePath, { typescript });
 }
 
+// src/generators/vue2.ts
+function generateVue2Component(componentName, iconNode, typescript) {
+  const formattedNodes = iconNode.map((node) => formatIconNode(node, 4)).join(",\n");
+  const templatePath = getVue2TemplatePath(typescript, "component");
+  return renderTemplate(templatePath, {
+    typescript,
+    componentName,
+    formattedNodes
+  });
+}
+function generateVue2Icon(typescript) {
+  const templatePath = getVue2TemplatePath(typescript, "icon");
+  return renderTemplate(templatePath, { typescript });
+}
+
 // src/generators/framework-strategy.ts
 var ReactStrategy = class {
   constructor() {
@@ -514,6 +533,26 @@ var VueStrategy = class {
     };
   }
 };
+var Vue2Strategy = class {
+  constructor() {
+    this.name = "vue2";
+    this.getComponentExtension = (_typescript) => {
+      return "vue";
+    };
+    this.getIndexExtension = (typescript) => {
+      return typescript ? "ts" : "js";
+    };
+    this.generateComponent = (componentName, iconNode, typescript) => {
+      return generateVue2Component(componentName, iconNode, typescript);
+    };
+    this.generateBaseComponent = (typescript) => {
+      return {
+        code: generateVue2Icon(typescript),
+        fileName: "Icon.vue"
+      };
+    };
+  }
+};
 var SvelteStrategy = class {
   constructor() {
     this.name = "svelte";
@@ -658,6 +697,7 @@ var FrameworkRegistry = class {
     this.strategies = /* @__PURE__ */ new Map();
     this.register(new ReactStrategy());
     this.register(new VueStrategy());
+    this.register(new Vue2Strategy());
     this.register(new SvelteStrategy());
     this.register(new SolidStrategy());
     this.register(new PreactStrategy());
@@ -1020,7 +1060,7 @@ async function generateIndexFile(svgFiles, config, dryRun = false) {
   const typescript = config.typescript ?? true;
   const strategy = getFrameworkStrategy(config.framework);
   const ext = strategy.getIndexExtension(typescript);
-  const usesDefaultExport = ["vue", "svelte", "react", "preact"].includes(config.framework);
+  const usesDefaultExport = ["vue", "vue2", "svelte", "react", "preact"].includes(config.framework);
   const exports2 = svgFiles.map((svgFile) => {
     const fileName = import_node_path4.default.basename(svgFile);
     const componentName = getComponentName(
@@ -1378,6 +1418,16 @@ Note: Project root detected at ${import_chalk2.default.cyan(projectRoot)}`));
         message: "Which framework are you using?",
         choices: frameworkChoices
       },
+      {
+        type: "list",
+        name: "vueVersion",
+        message: "Which Vue version?",
+        choices: [
+          { name: "Vue 3", value: "vue" },
+          { name: "Vue 2", value: "vue2" }
+        ],
+        when: (answers2) => answers2.framework === "vue"
+      },
       {
         type: "input",
         name: "input",
@@ -1423,7 +1473,8 @@ Note: Project root detected at ${import_chalk2.default.cyan(projectRoot)}`));
     await ensureDir(outputPath);
     spinner.succeed(`Created output directory: ${import_chalk2.default.cyan(answers.output)}`);
     const relativeConfigDir = import_node_path5.default.relative(configDir, projectRoot) || ".";
-    const configContent = generateConfigContent(answers, relativeConfigDir);
+    const finalFramework = answers.vueVersion || answers.framework;
+    const configContent = generateConfigContent({ ...answers, framework: finalFramework }, relativeConfigDir);
     spinner.start("Creating config file...");
     await writeFile(configPath, configContent);
     spinner.succeed(`Config file created at ${import_chalk2.default.green(configPath)}`);

package/dist/index.mjs

@@ -7,7 +7,7 @@ import {
   init,
   loadConfig,
   watch
-} from "./chunk-XHYCGABW.mjs";
+} from "./chunk-GY4VNET5.mjs";
 import "./chunk-CIKTK6HI.mjs";
 
 // src/types.ts

package/dist/templates/template-engine.ts

@@ -66,6 +66,14 @@ export function getVueTemplatePath(typescript: boolean, type: 'component' | 'ico
   return `vue/${type}.${suffix}.vue.hbs`
 }
 
+/**
+ * Get template path for Vue 2 components
+ */
+export function getVue2TemplatePath(typescript: boolean, type: 'component' | 'icon'): string {
+  const suffix = typescript ? 'ts' : 'js'
+  return `vue2/${type}.${suffix}.vue.hbs`
+}
+
 /**
  * Get template path for Svelte components
  */

package/dist/templates/vue2/component.js.vue.hbs

@@ -0,0 +1,20 @@
+<template>
+  <Icon :iconNode="iconNode" v-bind="$attrs" />
+</template>
+
+<script>
+import Icon from './Icon.vue'
+
+export default {
+  name: '{{componentName}}',
+  components: { Icon },
+  inheritAttrs: false,
+  data() {
+    return {
+      iconNode: [
+{{{formattedNodes}}}
+      ]
+    }
+  }
+}
+</script>

package/dist/templates/vue2/component.ts.vue.hbs

@@ -0,0 +1,22 @@
+<template>
+  <Icon :iconNode="iconNode" v-bind="$attrs" />
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import Icon from './Icon.vue'
+import type { IconNode } from 'vectify'
+
+export default Vue.extend({
+  name: '{{componentName}}',
+  components: { Icon },
+  inheritAttrs: false,
+  data() {
+    const iconNode: IconNode[] = [
+{{{formattedNodes}}}
+    ]
+
+    return { iconNode }
+  }
+})
+</script>

package/dist/templates/vue2/icon.js.vue.hbs

@@ -0,0 +1,135 @@
+<template>
+  <svg
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    :aria-hidden="shouldHide"
+    :aria-label="ariaLabel"
+    :role="title || ariaLabel ? 'img' : undefined"
+    v-bind="$attrs"
+    :class="mergedClass"
+  >
+    <title v-if="title">{{ title }}</title>
+    <component
+      v-for="(node, index) in cleanedIconNode"
+      :key="index"
+      :is="renderNode(node)"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'Icon',
+  inheritAttrs: false,
+  props: {
+    iconNode: {
+      type: Array,
+      required: true
+    },
+    size: {
+      type: [Number, String],
+      default: 24
+    },
+    color: {
+      type: String,
+      default: 'currentColor'
+    },
+    strokeWidth: {
+      type: [Number, String],
+      default: 2
+    },
+    className: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    ariaLabel: {
+      type: String,
+      default: ''
+    },
+    ariaHidden: {
+      type: [Boolean, String],
+      default: undefined
+    },
+    keepColors: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    mergedClass() {
+      return this.className ? `vectify-icon ${this.className}` : 'vectify-icon'
+    },
+    shouldHide() {
+      return this.ariaHidden !== undefined ? this.ariaHidden : (!this.title && !this.ariaLabel)
+    },
+    cleanedIconNode() {
+      if (this.keepColors) {
+        return this.iconNode
+      }
+      return this.cleanIconNodes(this.iconNode, this.color, this.strokeWidth)
+    }
+  },
+  methods: {
+    cleanIconNodes(nodes, color, strokeWidth) {
+      return nodes.map(node => {
+        const [type, attrs, children] = node
+
+        const cleanedAttrs = {}
+        let hasFill = false
+        let hasStroke = false
+        let originalStrokeWidth
+
+        Object.entries(attrs).forEach(([key, value]) => {
+          if (key === 'fill') {
+            if (value !== 'none') {
+              hasFill = true
+            }
+          }
+          if (key === 'stroke') {
+            hasStroke = true
+          }
+          if (key === 'strokeWidth' || key === 'stroke-width') {
+            originalStrokeWidth = value
+          }
+
+          if (!['stroke', 'fill', 'strokeWidth', 'stroke-width'].includes(key)) {
+            cleanedAttrs[key] = value
+          }
+        })
+
+        if (hasFill) {
+          cleanedAttrs.fill = color
+        } else if (hasStroke) {
+          cleanedAttrs.fill = 'none'
+          cleanedAttrs.stroke = color
+          cleanedAttrs.strokeWidth = originalStrokeWidth ?? strokeWidth
+          cleanedAttrs.strokeLinecap = 'round'
+          cleanedAttrs.strokeLinejoin = 'round'
+        }
+
+        const cleanedChildren = children ? this.cleanIconNodes(children, color, strokeWidth) : undefined
+
+        return [type, cleanedAttrs, cleanedChildren]
+      })
+    },
+    renderNode(node) {
+      const [type, attrs, children] = node
+
+      if (children && children.length > 0) {
+        return this.$createElement(
+          type,
+          { attrs },
+          children.map(child => this.renderNode(child))
+        )
+      }
+
+      return this.$createElement(type, { attrs })
+    }
+  }
+}
+</script>

package/dist/templates/vue2/icon.ts.vue.hbs

@@ -0,0 +1,138 @@
+<template>
+  <svg
+    :width="size"
+    :height="size"
+    viewBox="0 0 24 24"
+    :aria-hidden="shouldHide"
+    :aria-label="ariaLabel"
+    :role="title || ariaLabel ? 'img' : undefined"
+    v-bind="$attrs"
+    :class="mergedClass"
+  >
+    <title v-if="title">{{ title }}</title>
+    <component
+      v-for="(node, index) in cleanedIconNode"
+      :key="index"
+      :is="renderNode(node)"
+    />
+  </svg>
+</template>
+
+<script lang="ts">
+import Vue, { VNode } from 'vue'
+import type { IconNode } from 'vectify'
+
+export default Vue.extend({
+  name: 'Icon',
+  inheritAttrs: false,
+  props: {
+    iconNode: {
+      type: Array as () => IconNode[],
+      required: true
+    },
+    size: {
+      type: [Number, String] as Vue.PropType<number | string>,
+      default: 24
+    },
+    color: {
+      type: String,
+      default: 'currentColor'
+    },
+    strokeWidth: {
+      type: [Number, String] as Vue.PropType<number | string>,
+      default: 2
+    },
+    className: {
+      type: String,
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    ariaLabel: {
+      type: String,
+      default: ''
+    },
+    ariaHidden: {
+      type: [Boolean, String] as Vue.PropType<boolean | 'true' | 'false'>,
+      default: undefined
+    },
+    keepColors: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    mergedClass(): string {
+      return this.className ? `vectify-icon ${this.className}` : 'vectify-icon'
+    },
+    shouldHide(): boolean | 'true' | 'false' {
+      return this.ariaHidden !== undefined ? this.ariaHidden : (!this.title && !this.ariaLabel)
+    },
+    cleanedIconNode(): IconNode[] {
+      if (this.keepColors) {
+        return this.iconNode
+      }
+      return this.cleanIconNodes(this.iconNode, this.color, this.strokeWidth)
+    }
+  },
+  methods: {
+    cleanIconNodes(nodes: IconNode[], color: string, strokeWidth: number | string): IconNode[] {
+      return nodes.map(node => {
+        const [type, attrs, children] = node
+
+        const cleanedAttrs: Record<string, any> = {}
+        let hasFill = false
+        let hasStroke = false
+        let originalStrokeWidth: number | string | undefined
+
+        Object.entries(attrs).forEach(([key, value]) => {
+          if (key === 'fill') {
+            if (value !== 'none') {
+              hasFill = true
+            }
+          }
+          if (key === 'stroke') {
+            hasStroke = true
+          }
+          if (key === 'strokeWidth' || key === 'stroke-width') {
+            originalStrokeWidth = value
+          }
+
+          if (!['stroke', 'fill', 'strokeWidth', 'stroke-width'].includes(key)) {
+            cleanedAttrs[key] = value
+          }
+        })
+
+        if (hasFill) {
+          cleanedAttrs.fill = color
+        } else if (hasStroke) {
+          cleanedAttrs.fill = 'none'
+          cleanedAttrs.stroke = color
+          cleanedAttrs.strokeWidth = originalStrokeWidth ?? strokeWidth
+          cleanedAttrs.strokeLinecap = 'round'
+          cleanedAttrs.strokeLinejoin = 'round'
+        }
+
+        const cleanedChildren = children ? this.cleanIconNodes(children, color, strokeWidth) : undefined
+
+        return [type, cleanedAttrs, cleanedChildren] as IconNode
+      })
+    },
+    renderNode(node: IconNode): VNode {
+      const [type, attrs, children] = node
+
+      if (children && children.length > 0) {
+        return this.$createElement(
+          type,
+          { attrs },
+          children.map(child => this.renderNode(child))
+        )
+      }
+
+      return this.$createElement(type, { attrs })
+    }
+  }
+})
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vectify",
-  "version": "2.0.2",
+  "version": "2.0.4",
   "packageManager": "pnpm@9.15.9",
   "description": "A powerful command-line tool to generate React, Vue, and Svelte icon components from SVG files",
   "author": "Xiaobing Zhu <hellozxb252@gmail.com>",