vite使用iconify图标库

比眉伴天荒 2024-04-01 14:24 53阅读 0赞

## 1.安装 ##

[unocss][]  
[iconify][]

npm i -D unocss @unocss/preset-icons @iconify/json

## 2.配置vite.config.js ##

import {
         defineConfig } from 'vite'
    
    import Unocss from 'unocss/vite';
    import {
         presetUno, presetAttributify, presetIcons } from 'unocss';
    import UnocssIcons from '@unocss/preset-icons'
    export default defineConfig({
        
      plugins: [
      Unocss({
         
        presets: [
          UnocssIcons({
        
            prefix: 'i-',
            extraProperties: {
        
              display: 'inline-block'
            }
          }),
          presetUno(),
          presetAttributify(),
          presetIcons()
        ],
      })]
    })

## 3.使用 ##

<template>
        <div i-akar-icons:full-screen></div>
        <div i-emojione:dog></div>
        <div i-akar-icons:music></div>
        <div i-emojione:first-quarter-moon-face></div>
        <div i-emojione:full-moon-face></div>
    </template>

[unocss]: https://uno.antfu.me/
[iconify]: https://icon-sets.iconify.design/

发表评论取消回复

表情：

评论列表（有 0 条评论，53人围观）

还没有评论，来说两句吧...

相关阅读

相关 vite使用iconify图标库

1.安装 [unocss][] [iconify][] npm i -D unocss @unocss/preset-icons @iconify/json

比眉伴天荒/ 2024年04月01日 14:24/ 0 赞/ 54 阅读

相关使用 Python 创建 Quine 图标库

您是否曾经想为图形可视化添加天赋，但不确定 Quine 支持哪些图标？在这篇博客中，我们探索了一个 Python 脚本，该脚本从网络上获取有效的图标名称，配置探索 UI，然后创

蔚落/ 2024年03月22日 16:10/ 0 赞/ 36 阅读

相关 vue3+vite项目中使用svg图标

vue3+vite项目中使用svg图标引言 1. vite-plugin-svg-icons插件安装配置 2. 下载sv

淡淡的烟草味﹌/ 2023年10月11日 21:56/ 0 赞/ 86 阅读

相关阿里图标库使用（在线使用）

1.首先你需要准备一个github或者新浪微博账号用来登录（拥有阿里员工账号也可）地址：https://www.iconfont.cn/ 2.选择图标库，在搜索框选择

Myth丶恋晨/ 2022年12月14日 06:23/ 0 赞/ 320 阅读

相关阿里图标库的基本使用

一、进入阿里图标库官网站：[http://www.iconfont.cn][http_www.iconfont.cn] 二、选择想要的图标加入购物车(如果不想以unicode

末蓝、/ 2022年05月15日 12:52/ 0 赞/ 547 阅读

相关阿里巴巴矢量图标库 iconfont图标的使用

step 1:搜索阿里巴巴矢量图标库官网（https://www.iconfont.cn）,然后注册登录,或者用github，微博登录也行,此步骤跳过; step

谁借莪１个温暖的怀抱￠/ 2022年02月02日 11:13/ 0 赞/ 525 阅读

相关 FontAwesome 字体图标库使用

Intro Font Awesome(以下简称fa)是一套绝佳的图标字体库和CSS框架。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW

灰太狼/ 2022年01月30日 11:01/ 0 赞/ 499 阅读

相关阿里图标库的使用

网址：[https://www.iconfont.cn/plus/home/index][https_www.iconfont.cn_plus_home_index] 1.

矫情吗；*/ 2022年01月28日 07:19/ 0 赞/ 338 阅读

相关 Rails使用图标库技巧

网页中经常需要使用一些小图标，这里我们想使用Font Awesome这个图标库里的图标，我们可以到rubygems.org查看是否有人将该图标库封装成gem使得我们使用更加敏捷

今天药忘吃喽~/ 2021年12月24日 02:33/ 0 赞/ 257 阅读

相关 rn 图标库

yarn add react-native-vector-icons 在node_modules里找到react-native-vector-icon

柔光的暖阳◎/ 2021年07月24日 16:01/ 0 赞/ 481 阅读