如何让Laravel8+TailwindCSS2+InertiaJS项目的data-feather图标正常显示？

你代码中带data-feather属性的标签使用的是Feather Icons图标库，该图标库不是基于字体文件实现的，需要通过JS渲染为SVG元素，因此仅引入CSS文件无法正常显示。你可以按照以下步骤配置：

1. 安装依赖包 #

执行npm命令安装Feather Icons：

npm install feather-icons --save

如果偏好Vue3组件式调用，可以额外安装适配Vue3的组件包：

npm install vue-feather@next --save

2. 项目内初始化配置 #

直接使用<i data-feather>标签的配置方式 #

在你的前端入口文件resources/js/app.js中添加如下代码，完成全局渲染配置：

import feather from 'feather-icons'

// 首次页面加载完成后渲染所有Feather图标
document.addEventListener('DOMContentLoaded', () => {
  feather.replace()
})

// 适配InertiaJS路由切换后重新渲染图标
document.addEventListener('inertia:navigate', () => {
  feather.replace()
})

配置完成后，你原有模板中的<i data-feather="chevron-down"></i>标签即可正常渲染为图标，直接给标签添加TailwindCSS的宽高、颜色类即可调整样式，例如：

<i data-feather="chevron-down" class="w-4 h-4 text-gray-600"></i>

Vue3组件式调用的配置方式 #

如果安装了vue-feather@next，在resources/js/app.js中全局注册组件即可：

import { createApp } from 'vue'
import VueFeather from 'vue-feather'

const app = createApp({})
// 你的其他全局注册逻辑
app.component(VueFeather.name, VueFeather)
app.mount('#app')

使用时直接调用组件即可：

<vue-feather type="chevron-down" class="w-4 h-4 text-gray-600"></vue-feather>

3. 重新编译前端资源 #

执行Laravel Mix编译命令生效：

npm run dev

内容的提问来源于stack exchange，提问作者mstdmstd