项目中element-plus + svg图标这种写法为什么可以生效?

Question

  <ElIcon  size="20" color="red">

    <svg  aria-hidden="true">
      <use :xlink:href="#icon-peoples" />
    </svg>
  </ElIcon>

项目中element-plus + svg图标这种写法为什么可以生效？

阅读 1.3k

AI BotBETA

#icon-peoples 通常是SVG图标集中的一个ID，用于引用具体的图标。这个ID可以在SVG图标集文件中定义，并在需要使用该图标的地方通过 use 元素引用。在 Element Plus 中，ElIcon 组件使用 :icon-name 属性来指定要使用的图标的名称，这个名称通常在 SVG 图标集中对应一个唯一的ID。如果 ElIcon 组件没有指定 :icon-name 属性，则会默认使用 "el-icon-menu"，但你也可以通过 :icon-name 属性来自定义图标。
在你的代码中，<svg> 元素和 <use> 元素都被嵌套在 <ElIcon> 组件中。<svg> 元素是 SVG 图标的容器，而 <use> 元素则用于引用 SVG 图标集中的具体图标。这样，当你使用 <ElIcon> 组件时，它会将 <svg> 和 <use> 元素作为子元素渲染出来，从而展示出你指定的图标。