Skip to content

Latest commit

 

History

History
140 lines (101 loc) · 5.34 KB

README.md

File metadata and controls

140 lines (101 loc) · 5.34 KB
Raw

react-simple-devicons

react-simple-devicons is a React component library for displaying devicons icons as SVGs, offering customizable styles, color, and scaling.

Installation

To install, use your preferred package manager:

npm install react-simple-devicons
pnpm install react-simple-devicons
yarn add react-simple-devicons

Usage

Import 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>
  );
}

Properties

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.

Scale Values

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

Example

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):

Implementing Server-Side Rendering (SSR)

To learn about using Server-Side Rendering with Next.js, please refer to the official documentation.

Step 1: Create a Component for DevIcon

First, create a component that wraps DevIcon (app/devicon.tsx):

"use client";

import { DevIcon } from "react-simple-devicons";

export default DevIcon;

Step 2: Import the Component into Your Pages

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>
  );
}

Error Handling

If an icon or style is unavailable, DevIcon throws an error with a message directing you to devicon.dev to confirm icon availability.

Acknowledgments

This project was built using the TypeScript React Package Starter as a foundation. Thank you to Tim Mikeladze for providing this helpful starter template.