@fish-render/icons/utils/iconGenerator.ts

Fish Render icon library for Vue 3

import { defineComponent, h } from 'vue'
import type { IconProps } from '../types'

// 解析 SVG 内容，提取 path 元素和 viewBox
function parseSvgContent(svgContent: string) {
  const parser = new DOMParser()
  const doc = parser.parseFromString(svgContent, 'text/html')
  const svgElement = doc.querySelector('svg')
  const pathElement = doc.querySelector('path')

  if (svgElement && pathElement) {
    return {
      viewBox: svgElement.getAttribute('viewBox') || '0 0 24 24',
      d: pathElement.getAttribute('d') || '',
      fill: pathElement.getAttribute('fill') || 'currentColor',
      stroke: pathElement.getAttribute('stroke') || '',
      strokeWidth: pathElement.getAttribute('stroke-width') || '',
      strokeLinecap: pathElement.getAttribute('stroke-linecap') || '',
      strokeLinejoin: pathElement.getAttribute('stroke-linejoin') || '',
    }
  }

  return null
}

// 最优版本：SVG 直接设置 1em 尺寸
function createSimpleIconComponent(svgContent: string, name: string) {
  return defineComponent({
    name,
    setup() {
      return () =>
        h('span', {
          innerHTML: svgContent,
          class: 'icon-component',
        })
    },
  })
}

export function createIconComponent(svgContent: string, name: string) {
  return createSimpleIconComponent(svgContent, name)
}