Iconify如何在Vue Vite 3中实现按需加载图标？

这个特性主要靠以下几个核心机制协同实现：

• 轻量组件容器设计：@iconify/vue提供的Icon组件本身只是一个SVG渲染壳，不内置任何图标数据。它的核心作用是接收icon属性，动态渲染对应图标的SVG内容。
• 构建时静态分析与按需引入：当你在模板中指定icon="mdi-light:home"这类图标ID时，主流构建工具（Vite、Webpack等）会通过静态分析识别到这些使用的图标ID。@iconify/vue内部已经预设了和这些构建工具的兼容逻辑，会自动从Iconify的图标资源中提取对应图标的SVG数据，将其打包到最终产物里，完全不需要额外配置。
• Tree Shaking 自动剔除未用资源：构建过程中，所有未被代码/模板引用到的图标数据，会被Tree Shaking机制自动剔除，最终产物只保留实际用到的图标SVG代码，实现了按需打包的效果。
• 运行时直接渲染本地数据：打包后的图标数据会被转换成组件可直接使用的格式，运行时Icon组件直接读取本地的SVG数据进行渲染，不需要再远程加载图标资源。

内容的提问来源于stack exchange，提问作者Joseph