关于使用 @iconify/iconify图标库组件在vite中的使用

最新推荐文章于 2025-03-14 14:56:10 发布

囿于江湖

最新推荐文章于 2025-03-14 14:56:10 发布

阅读量3.4k

点赞数 5

文章标签：前端 vue.js javascript

本文链接：https://blog.csdn.net/dongheng123/article/details/135356515

版权

这篇文章介绍了如何使用Iconify，一个通用的图标框架，它集成了多个图标库如AntDesign和ElementUI。文章详细讲解了通过npm安装、配置Vite插件PurgeIcons，并给出了一个使用示例，展示了如何在项目中轻松引入和展示图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Iconify 是最通用的图标框架，将各种图标库的图标集中在这里的一个组件库，例如ant-design,element-ui等网站地址如下
https://iconify.design/getting-started/
使用过程如下

npm install @iconify/iconify -S
npm install vite-plugin-purge-icons @iconify/json -D

配置如下
在这里插入图片描述
在入口文件或者使用页面导入下面

// main.js
import '@purge-icons/generated'

在这里插入图片描述
使用案例

 <div :size="16" class="op-btn" @click="copyCode">
            <a-tooltip>
              <template #title>复制代码</template>
              <div><span class="iconify" data-icon="ph:copy" Color="#3451b2" style="font-size:20px"> </span> </div> 
            </a-tooltip>
          </div>