美酒没故事° 2024-01-18 15:12 采纳率: 38%
浏览 37

iocnify怎么在vue2中使用class名啊?

根据官方文档看,需要先 import { Icon } from '@iconify/vue2'; 组件,然后使用组件 <Icon icon="mdi-light:home" />

但是我在 vue-naive-admin 开源项目发现了不用import { Icon } from '@iconify/vue2'; 组件,不使用 <Icon icon="mdi-light:home" /> 而是用 i 标签,给class即可

img

我想知道怎么做到的

img

  • 写回答

3条回答 默认 最新

  • 美酒没故事° 2024-01-18 17:22
    关注

    vue-naive-admin项目可以使用图标的class名是因为结合了unocss

    那么在vue2中可以这样:

    安装依赖

    npm i unocss @iconify/json
    

    配置依赖

    img

    img

    img

    使用

    <i class="i-fa:user"></i>
    <i class="i-fa:key"></i>
    

    效果

    img

    评论

报告相同问题?

问题事件

  • 修改了问题 1月18日
  • 创建了问题 1月18日

悬赏问题

  • ¥15 电脑最近经常蓝屏,求大家看看哪的问题
  • ¥60 高价有偿求java辅导。工程量较大,价格你定,联系确定辅导后将采纳你的答案。希望能给出完整详细代码,并能解释回答我关于代码的疑问疑问,代码要求如下,联系我会发文档
  • ¥50 C++五子棋AI程序编写
  • ¥30 求安卓设备利用一个typeC接口,同时实现向pc一边投屏一边上传数据的解决方案。
  • ¥15 SQL Server analysis services 服务安装失败
  • ¥15 基于面向对象的图书馆借阅管理系统
  • ¥15 opencv图像处理,需要四个处理结果图
  • ¥20 centos linux 7.9安装php8.2.18不支持mysqli模块的问题
  • ¥15 stata空间计量LM检验
  • ¥15 关于k8s node节点被释放后如何驱逐节点并添加新节点