NextJS开发:使用IconPark、Lucide图标库

IconPark、Lucide两个很不错的图标库,如果需要用到微信、阿里等国内logo可以使用IconPark,Lucide中没有包含这些内容。

安装IconPark

npm install @icon-park/react --save

简单使用

import {Home} from '@icon-park/react';<Home/>
<Home theme="filled"/>

封装一下,避免每个页面导入,更换图标库也更方便

import {Home} from '@icon-park/react';
const Icons={home: Home
}
export default Icons;

使用

import Icons from "@/components/icons"export default function Test() {return (<Icons.home theme="filled" size="16"/>)
}

安装Lucide

npm install lucide

使用装Lucide

import { Users,
} from "lucide-react";<Users/>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/140134.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Module build failed (from ./node_modules/postcss-loader/src/index.js):

出现该错误是你可能没认真看官网的安装配置&#xff0c;可直接看该目录3&#xff0c;一个字一个字看 先安装uview 如果选择v1版本&#xff0c;建议使用npm下载&#xff0c;下面以v1版本为例&#xff0c;使用的是npm下载&#xff0c;导入uview时该文件也在node_modules文件夹里…

Anolis 8.6 安装 Drawio

Anolis 8.6 安装 Drawio 22.1.0 一.RPM版&#xff08;不建议&#xff09;二.WAR 包部署 一.RPM版&#xff08;不建议&#xff09; Draw RPM 包下载链接 RPM 包直接基于Linux图形化能力部署&#xff0c;服务器类型的Linux系统启动RPM包安装的Draw可能比较复杂 系统版本 ## 1.…

(一)正点原子I.MX6ULL kernel6.1移植准备

一、概述 学完了正点原子的I.MX6ULL移植&#xff0c;正点原子的教程是基于Ubuntu18&#xff0c;使用的是4.1.15的内核&#xff0c;很多年前的了。NXP官方也发布了新的6.1的内核&#xff0c;以及2022.04的uboot。 本文分享一下基于Ubuntu22.04&#xff08;6.2.0-36-generic&…

Unity中Shader的雾效

文章目录 前言一、Unity中的雾效在哪开启二、Unity中不同种类雾的区别1、线性雾2、指数雾1&#xff08;推荐用这个&#xff0c;兼具效果和性能&#xff09;3、指数雾2&#xff08;效果更真实&#xff0c;性能消耗多&#xff09; 三、在我们自己的Shader中实现判断&#xff0c;是…

PHP实用工具:实现Excel转Mysql工具自动字段长度

所得Mysql语句一般适合查立得万能搜等mysql只查不改的系统。 <?php $t "Excel转Mysql工具"; $s "Excel复制过来的二维结构表内容,第一行各列字段名(列标题),以后一行一条数据"; $yw "chalide".date("YmdH"); $datedir "…

多关键字dp,P1687 机器人小Q

P1687 机器人小Q - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 题目描述 成功派送完这个大单后&#xff0c;餐厅决定引入一名新成员&#xff1a;机器人小 Q。小 Q 的到来让餐厅的客源增加了不少&#xff0c;但是&#xff0c;一段时间之后&#xff0c;新的问题又出现了&…

【c++随笔12】继承

【c随笔12】继承 一、继承1、继承的概念2、3种继承方式3、父类和子类对象赋值转换4、继承中的作用域——隐藏5、继承与友元6、继承与静态成员 二、继承和子类默认成员函数1、子类构造函数 二、子类拷贝构造函数3、子类的赋值重载4、子类析构函数 三、单继承、多继承、菱形继承1…

设计模式-工厂方法

工厂方法是一种创建型设计模式&#xff0c;其在父类中提供一个创建对象的方法&#xff0c;允许子类决定实例化对象的类型。 问题 假设你开设了一个汽车工厂。创业初期工厂只能生产宝马这一款车&#xff0c;因此大部分代码都位于名为宝马的类中。 工厂效益非常好&#xff0c;为…

IDEA搭建ssm项目

此前&#xff0c;我一直在用eclipse编辑器做java项目&#xff0c;现在初次使用IDEA编辑器&#xff0c;在这里&#xff0c;我记录了使用IDEA环境下搭建ssm项目的过程。 创建Maven项目&#xff0c;如下 右击TEST4项目&#xff0c;在弹出的菜单中选择Add Framework Support 在弹出…

屏幕提词软件Presentation Prompter mac中文版使用方法

Presentation Prompter for mac是一款屏幕提词器软件&#xff0c;它可以将您的Mac电脑快速变成提词器&#xff0c;支持编写或导入&#xff0c;可以在一个或多个屏幕上平滑地滚动&#xff0c;Presentation Prompter 下载是为适用于现场表演者&#xff0c;新闻广播员&#xff0c;…

计算机网络——b站王道考研笔记

第一章 计算机网络体系结构 1.计算机网络概述 &#xff08;1&#xff09;概念 计算机网络是一个将分散的&#xff0c;具有独立功能的计算机系统&#xff0c;通过通信设备与线路连接起来&#xff0c;由功能完善的软件实现资源共享和信息传递的系统&#xff1b; 是互连的&#…

数据分析面试题1

1.右表为一组数据&#xff0c;尝试进行简单分析&#xff0c;并给出结论&#xff08;使用公式和图表辅助&#xff09; ①理解数据 userid&#xff1a;用户id神兽印记消耗数量 ②数据清洗 冻结首行&#xff0c;将列标题的英文字段转换成汉字字段检查是否有重复项&#xff1a;…

Leetcode—20.有效的括号【简单】

2023每日刷题&#xff08;二十七&#xff09; Leetcode—20.有效的括号 C实现代码 class Solution { public:bool isValid(string s) {stack<char> arr;int len s.size();if(len 1) {return false;}for(int i 0; i < len; i) {if(s[i] ( || s[i] [ || s[i] {)…

基于springboot实现沁园健身房预约管理系统【项目源码】计算机毕业设计

基于springboot实现沁园健身房预约管理系统演示 B/S架构 B/S结构是目前使用最多的结构模式&#xff0c;它可以使得系统的开发更加的简单&#xff0c;好操作&#xff0c;而且还可以对其进行维护。使用该结构时只需要在计算机中安装数据库&#xff0c;和一些很常用的浏览器就可以…

Flink

1. Flink简介 1.1 初识Flink Flink项目的理念是&#xff1a;“Apache Flink是为分布式、高性能、随时可用以及准确的流处理应用程序打造的开源的有状态的流处理框架”。 Apache Flink是一个框架和分布式处理引擎&#xff0c;用于对无界和有界数据流进行有状态计算。Fl…

进亦忧,退亦忧,Github Copilot 集成进入 Visual Studio 带来的思考

开篇想到《岳阳楼记》的结尾&#xff1a; 不以物喜&#xff0c;不以己悲&#xff1b;居庙堂之高则忧其民&#xff1b;处江湖之远则忧其君。是进亦忧&#xff0c;退亦忧。然则何时而乐耶&#xff1f;其必曰&#xff1a;“先天下之忧而忧&#xff0c;后天下之乐而乐”乎。未来30…

HarmonyOS 高级特性

引言 本章将探讨 HarmonyOS 的高级特性&#xff0c;包括分布式能力、安全机制和性能优化。这些特性可以帮助你构建更强大、更安全、更高效的应用。 目录 HarmonyOS 的分布式能力HarmonyOS 的安全机制HarmonyOS 的性能优化总结 1. HarmonyOS 的分布式能力 HarmonyOS 的分布…

Python 使用tkinter复刻Windows记事本UI和菜单功能(一)

下一篇&#xff1a;Python 使用tkinter复刻Windows记事本UI和菜单&#xff08;二&#xff09;-CSDN博客 介绍&#xff1a; Windows操作系统中自带了一款记事本应用程序&#xff0c;通常用于记录文字信息&#xff0c;具有简单文本编辑功能。Windows的记事本可以新建、打开、保…

html菜单的基本制作

前面写过一点网页菜单的博文&#xff1b;下面再复习一些技术要点&#xff1b; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns"http://www.w3.…

Python---元组的相关操作方法

由于元组中的数据不允许直接修改&#xff0c;所以其操作方法大部分为查询方法。 编号函数作用1元组[索引]根据索引下标查找元素2index()查找某个数据&#xff0c;如果数据存在返回对应的下标&#xff0c;否则报错&#xff0c;语法和列表、字符串的index方法相同3count()统计某…