使用DOMParser来规避使用v-html

处于安全考虑，大多数时候其实不应该使用v-html来解析一段字符串，并且有时候这个字符串的解析结果可能只是我们组件的一部分，如果使用v-html会导致全部内容被覆盖，这样做的结果可能是符合期望的但是这不是准确的做法，最近看到了一个方法来解决这个问题，就是DOMParser

之前的写法

function getLocalIcon(icon: string) {
  const svgName = icon.replace('local:', '')
  const svg = import.meta.glob('@/assets/svg-icons/*.svg', {
    query: '?raw',
    import: 'default',
    eager: true,
  })
  return svg[`/src/assets/svg-icons/${svgName}.svg`]
}

<n-icon
  v-if="icon && isLocal"
  :size="size"
  :depth="depth"
  :color="color"
  v-html="getLocalIcon(icon)"
/>

改进后的写法，使用了DOMParser来规避封装组件内部字符串使用v-html解析的问题

function getLocalIcon(icon: string) {
  const svgName = icon.replace('local:', '')
  const svg = import.meta.glob<string>('@/assets/svg-icons/*.svg', {
    query: '?raw',
    import: 'default',
    eager: true,
  })

  const domparser = new DOMParser()
  return domparser.parseFromString(svg[`/src/assets/svg-icons/${svgName}.svg`], 'image/svg+xml')
}

<n-icon
    v-if="icon && !isLocal"
    :size="size"
    :depth="depth"
    :color="color"
  >
    {{ getLocalIcon(icon) }}
</n-icon>