记录一下方便以后用
🎈在 Uniapp 微信小程序开发的过程中,发现了 TailWind 和 Iconify 结合的强大之处,赶紧记录下来方便以后使用。😉

一、安装 @egoist/tailwindcss-icons
通过以下命令可以轻松安装:
npm i @egoist/tailwindcss-icons -D
yarn add @egoist/tailwindcss-icons
二、配置 tailwind.config.js
引入必要的模块并进行配置:
const { iconsPlugin, getIconCollections } = require("@egoist/tailwindcss-icons")
module.exports = {
plugins: [
iconsPlugin({
//这里根据自己使用的来添加我用的是solar
collections: getIconCollections(["solar"]),
}),
],
}
更多说明可以在官方仓库 egoist/tailwindcss-icons: Use any icon (100,000+) from Iconify, for TailwindCSS (github.com) 查看。
三、创建 iconify.vue 组件文件
在 Uniapp 项目根目录下的 components 中新建 iconify.vue 组件文件,方便后期使用。
<template>
<text class="iconify" :class="[props.icon]" :style="iconStyle" />
</template>
<script lang="ts" setup>
import { computed } from 'vue';
/**
* @name Iconify
* @desc 图标组件 使用 iconify + tailwindcss
* 更多图标库 https://icon-sets.iconify.design/
* @docs https://github.com/egoist/tailwindcss-icons
* @example <Iconify icon="i-mdi-account-box" size="32" color="green" />
*/
interface Props {
icon: string
size?: string | number
color?: string
}
const props = withDefaults(defineProps<Props>(), {
size: 'inherit',
});
const iconSize = computed(() => (Number.isNaN(Number(props.size)) ? `${props.size}` : `${props.size}rpx`));
const iconStyle = computed(() => {
const styles: Record<string, string> = {};
if (props.color) {
styles.color = props.color;
}
if (props.size) {
styles.fontSize = iconSize.value;
}
return styles;
});
</script>
<style lang="scss" scoped>
.iconify {
display: inline-block;
line-height: 1;
}
</style>
四、在页面中使用
在需要使用图标的页面进行引入:
<script setup>
import Iconify from '@/components/Iconify/index.vue';
</script>
<template>
<div>
<Iconify icon="i-solar-4k-linear" size="64" color="blue" />
<Iconify icon="i-solar-4k-linear" size="48" color="orange" />
<Iconify icon="i-solar-4k-linear" size="32" class="text-green-400" />
<Iconify icon="i-solar-4k-linear" class="text-red-400" />
<Iconify icon="i-solar-4k-linear" />
</div>
</template>
💕特别感谢 h_mo,在他的 uniapp-vue3-vite-ts-template 中发现了这个超棒的解决方法。