iconview v1.0.7

How to use IconView Icons in Next.js

STEP 1: Install Node Package,

npm i iconview

STEP 2: Add the Configuration in Next Config --

const nextConfig = {

    transpilePackages: ['iconview'],
};

module.exports = nextConfig;

Search & Import Icon into Your Page. Example: https://iconview.org to Search Icons. and copy.

search icons - https://iconview.org

import { Facebook_Fab } from "iconview/svgs/Facebook_Fab"
import { Wifi_Fas } from "iconview/svgs/Wifi_Fas"

STEP 4: Copy and Paste the style.css Into your global.css file, add at the top --

global.css

    @import "iconview/style.css"

page.js

import { Facebook_Fab } from "iconview/svgs/Facebook_Fab"
import { Sun_Far } from "iconview/svgs/Sun_Far"  

// Note That Most icon is Less than - 1kb icon

export default function Home() {
    return (
        <div>
            <Facebook_Fab/>
            <Sun_Far className="sun" color="blue" onClick={handleClick} />
        </div>
    )
}

Example of How to Modify / Style Icons

.icon{
font-size: 20px;
color: blue;
cursor: pointer;
padding: 10px;
background-color: lightblue;
border-radius: 20%;
transition: all 0.3s;
}

.icon:hover{
transform: scale(110%);
color: yellow;
}