2021-08-30 vite使用iconify,图标任你用!

无道 2021-08-30 1 条评论 前端相关 阅读160 手机阅读

前言

需要使用到antfu大佬开发的vite插件

iconify

Iconify是功能最丰富的图标框架。 可以与任何图标库一起使用的统一图标框架。 开箱即用的功能包括80多个图标集和超过70,000个图标

有了iconify,基本上也不选哟iconfont了,因为其实如果你用过iconfont,会发现很多图标其实大小这些不配套,需要修改。

下载

yarn add @iconify/iconify
yarn add vite-plugin-purge-icons @iconify/json -D

配置

// vite.config.js
import PurgeIcons from 'vite-plugin-purge-icons'

export default {
  plugins: [
    PurgeIcons({
      /* PurgeIcons Options */
    })
  ]
}

main.js

import { createApp } from 'vue'
import App from './App.vue'

import '@purge-icons/generated' // <-- This

createApp(App).mount('#app')

搜索

安装好图标库和插件后,可以在此搜索:

Icon Sets • Iconify

N多图标随你用!

image-20210830211006680

然后复制他给的span就行:

image-20210830211316268

当然,我们使用Vue,肯定可以封装成组件:

<template>
  <span :style="{ fontSize: size }">
    <span class="iconify m-iconify" :data-icon="icon"></span>
  </span>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Icon',
  props: {
    icon: { type: String, required: true },
    size: { type: String, default: '18' },
  },

  setup() {
    return {};
  },
});
</script>

<style scoped lang="scss">
.m-iconify {
  vertical-align: middle;
}
</style>

参考

purge-icons/packages/vite-plugin-purge-icons at main · antfu/purge-icons (github.com)

全文完 [
有帮助?打赏
支付宝打赏
微信打赏
]
标签: iconify vite
修改: 08月30日 21:26
下一篇: 没有下一篇啦~

网站每日ip 1千,交换友链,https://money1.us/521

评论已加载完毕啦~
点击刷新/生成验证码
It's me
昵称:无道
坐标:成都
性别:
一个人,一介学生社会人,一个儿子~ 愿你我都被世界温暖以待