- 综合排序
- 最热优先
- 最新优先
- </template> <script setup lang="ts"> const links = [ { label: 'Home', icon: 'i-heroicons-home ' }, { label: 'Navigation', icon: 'i-heroicons-square-3-stack-3d' }, { label: 'Breadcrumb ', icon: 'i-heroicons-link' } ] </script> 可以看到 Nuxt UI 的组件和 tailwindcss 的类名都生效了： 如果你遇到 icon 类似的错误 ，你应该还需要安装 @iconify-json/heroicons 这个库 pnpm add @iconify-json/heroicons 配置 TypeScript 1、 安装依赖 pnpm add来自专栏Nuxt.js 实战系列
Nuxt3 实战 (四)：安装 Nuxt UI 和配置 Typescript 类型检查
>
1.4K10编辑于 2025-08-13
奇奇怪怪网站记录
传送门：https://colorffy.com/ Heroicons Heroicons 一个漂亮时尚且纯手工创作的 SVG 图标库，由 Tailwind CSS 制造商创作。 Heroicons 分成了三大图标类型，分别是 Outline 线框图标、Solid 固体图标、以及 Mini 迷你图标，每一种类型的图标应用的场景有所不同，可以用于网站导航、应用程序、按钮等等，你可以直接复制 传送门：https://heroicons.com/ Recoded Recoded 为程序开发人员的模型生成器，能够将您的代码变成精美的图像和视频，提供了五种模型风格，支持市面上所有主流的开发语言，比如
GitHub 热点速览 Vol.33：听说程序员都是颜控？
Heroicons 也不甘示弱，收录了 140+ 种别致小图标。 本周特推 1.1 免费高颜值图标：Heroicons 本周 star 增长数：1700+ Heroicons 是基于 MIT 许可证的免费 svg 图标，你可以在你的网站中使用它们。 目前每种样式（Outline style 和 Solid style）有 140 种图标，你可以在线访问：https://heroicons.dev/ 查看图标。 GitHub 地址→https://github.com/tailwindlabs/heroicons 1.2 美照共享助力机器学习：Dataset 本周 star 增长数：1150+ New Dataset
Nuxt3 实战 (八)：优雅的实现暗黑主题模式
'i-heroicons-moon-solid' : 'i-heroicons-sun-solid'" class="h-5 w-5" /> </el-button
借助 CodeBuddy 打造我的图标预览平台 —— IconWiz 开发实录
接下来，CodeBuddy 帮我分析了项目所需的核心依赖： Heroicons（@heroicons/vue） Feather Icons（feather-icons） Material Design 多图标库的整合思路也很精巧 我原本以为集成多个图标库是一件比较麻烦的事，结果 CodeBuddy 把 Heroicons、Feather、Material 的数据处理得非常统一。
上周 GitHub 热点速览 vol.09：手撕 LeetCode 一日 star 破两千
趋势榜相较上上周就如同前股市一般，跌到不行，无论是新晋开源小项，还是坚挺老项目，Star 增长量都不如之前，即使“大环境”欠佳，但是有些新开源项目的表现让人眼前一亮，比如开源 6 天 star 破 3k 的 UI Heroicons GitHub 地址 →https://github.com/sxyazi/free-hls 1.5 UI icon：Heroicons 本周 star 增长数：3000+ Heroicons 是一个可免费使用的 GitHub 地址 →https://github.com/refactoringui/heroicons 1.6 事件管理器：Dispatch 本周 star 增长数：1100+ Dispatch
Nuxt3 实战 (六)：Footer 底部布局
'i-heroicons-moon-solid' : ' i-heroicons-sun-solid'" size="sm" variant="ghost"
Nuxt3 实战 (五)：Header 头部布局
'i-heroicons-moon-solid' : ' i-heroicons-sun-solid'" size="sm" variant="ghost"
推荐 5 个优秀的 Javascript 图标库 🚀
Heroicons SVG 图标，由很火的 Tailwind CSS 制作者引导。 Tailwind CSS 可以打开你编写样式的新大门，感兴趣可以了解下。
TailwindCSS 资源推荐
Heroicons 官方维护的图标库，24*24 标准大小，可以一键拷贝 JSX 和 SVG，非常好用，缺点就是目前只有 230 个图标，不过我们优先可以从这里复制，没有再去 iconfont 上找
74.8K star！这个开源图标库让界面设计效率提升10倍！
标准性能监控：内置资源加载分析工具，可检测图标使用效率同类推荐Material Design Icons：谷歌系产品首选，Material风格统一Ant Design Icons：阿里系项目标配，中文文档完善Heroicons
Nuxt3在使用Tailwindcss情况下，如何优雅实现深色模式切换？
'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid' " ring-primary-500 dark:focus-visible:ring-primary-400 inline-flex items-center"> <span class="i-<em>heroicons</em>-cog
React 图标库使用指南
React 生态系统中有许多优秀的图标库，如 react-icons、material-ui/icons 和 @heroicons/react 等。
使用nextjs进行CRUD开发
/app/ui/dashboard/nav-links.tsximport { UserGroupIcon, HomeIcon, DocumentDuplicateIcon,} from '@heroicons /navigation 导入 usePathname() ：'use client'; import { UserGroupIcon, HomeIcon, InboxIcon,} from '@heroicons
用过 tailwindcss 才知道，命名真的是顶级痛点
React 的 Tailwind UI 依赖于Headless UI来支持所有交互行为，并依赖于Heroicons来提供图标，因此你需要将这两个库添加到你的项目中： npm install @headlessui /react @heroicons/react !
手把手教你！全栈Blog应用实战：从零搭建到本地部署
blog-frontend -- --template react-tscd blog-frontendnpm install react-router-dom axios react-query @heroicons
实录: CloudBase AI CLI 运行实操
: React Router 6 (HashRouter模式)样式: Tailwind CSS 3.4.17 + DaisyUI 5.0.35动画: Framer Motion 12.12.1图标: Heroicons : React Router 6 (HashRouter模式)样式: Tailwind CSS 3.4.17 + DaisyUI 5.0.35动画: Framer Motion 12.12.1图标: Heroicons
基于 ChatGPT 和 React 搭建 JSON 转 TS 的 Web 应用
icons 文件夹将包含上图中的删除和复制图标cd client/srcmkdir iconscd iconstouch Copy.jsx Delete.jsx更新 Copy.jsx 文件以添加来自 Heroicons
GPT-5 提示工程指南
：Next.js (TypeScript), React, HTML 样式/UI：Tailwind CSS, shadcn/ui, Radix Themes 图标：Material Symbols, Heroicons Next.js (TypeScript), React, HTML 样式 / UI: Tailwind CSS, shadcn/ui, Radix Themes 图标: Material Symbols, Heroicons
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号