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

Question

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

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

1. icon-peoples是element-plus自带的，还是本地配置的

2. svg的使用和ElIcon的关系是什么？

Answer 1

站立一个博主有解释, 蛮清楚的:

https://segmentfault.com/a/1190000041648370#item-4

Answer 2

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