react-simple-devicons v0.1.6

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:

Scale Values

The scale prop adjusts the icon's dimensions. Here’s a list of predefined sizes:

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

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

const DevIcon = () => {
  return <DevIcon />;
};

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.