小记💡Uniapp Vue3 开发巧用 TailWind 和 Iconify


记录一下方便以后用

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

@egoist/tailwindcss-icons

一、安装 @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 中发现了这个超棒的解决方法。