react-simple-devicons is a React component library for displaying devicons icons as SVGs, offering customizable styles, color, and scaling.
To install, use your preferred package manager:
npm install react-simple-deviconspnpm install react-simple-deviconsyarn add react-simple-deviconsImport the DevIcon component into your React application:
import React from "react"; import { DevIcon } from "react-simple-devicons"; export default function App() { return ( <div> <DevIcon icon="react" color="#61dafb" scale="3xl" style="plain" /> </div> ); }The DevIcon component accepts the following props:
| Prop | Type | Description |
|---|---|---|
color | string | Optional color for the icon. Note: Color cannot be applied if using the original style. |
icon | string | Icon name (e.g., "react", "javascript"). Check available icons at devicon.dev. |
scale | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | Scale of the icon, setting its dimensions in pixels. Default is "md" (24px). See Scale Values below. |
style | "line" | "line-woodmark" | "original" | "original-woodmark" | "plain" | "plain-woodmark" | Optional style for the icon. Note: Color is only customizable with line and plain styles. |
The scale prop adjusts the icon's dimensions. Here’s a list of predefined sizes:
| Scale Value | Pixel Dimensions |
|---|---|
xs | 12px |
sm | 16px |
md | 24px |
lg | 32px |
xl | 40px |
2xl | 48px |
3xl | 56px |
4xl | 64px |
5xl | 72px |
6xl | 80px |
7xl | 96px |
8xl | 112px |
9xl | 128px |
import React from "react"; import { DevIcon } from "react-simple-devicons"; const App = () => { return ( <div> {/* React icon with custom color and size */} <DevIcon icon="react" color="#61dafb" style="plain" scale="5xl" /> {/* JavaScript icon in original style */} <DevIcon icon="javascript" style="original" scale="md" /> </div> ); }; export default App;Here’s a revised version of your section on implementing Server-Side Rendering (SSR):
To learn about using Server-Side Rendering with Next.js, please refer to the official documentation.
First, create a component that wraps DevIcon (app/devicon.tsx):
"use client"; import { DevIcon } from "react-simple-devicons"; export default DevIcon;Next, import the newly created component into your pages (app/page.tsx):
import DevIcon from "./devicon"; export default function Page() { return ( <div> <p>View Dev Icons</p> {/* Works since DevIcon is a Client Component */} <DevIcon /> </div> ); }If an icon or style is unavailable, DevIcon throws an error with a message directing you to devicon.dev to confirm icon availability.
This project was built using the TypeScript React Package Starter as a foundation. Thank you to Tim Mikeladze for providing this helpful starter template.