Skip to content

phothinmg/jsx-social-icons

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

27 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Jsx Social Icons with link

ss


Checked with Biome

Install

npm i jsx-social-icons
pnpm i jsx-social-icons
yarn add  jsx-social-icons

React

import ReactSocialIcon from "jsx-social-icons/react";

export function Home() {
  return (
    <main>
      <ReactSocialIcon
        name="github"
        href="https://github.com"
        size={36}
        fillColor="#673ab8"
        fillOpacity={0.9}
        title="Link to my github profile"
        target="_blank"
        className="My class"
      />
    </main>
  );
}

Preact

import PreactSocialIcon from "jsx-social-icons/preact";

export function Home() {
  return (
    <div>
      <PreactSocialIcon
        name="github"
        href="https://github.com"
        size={36}
        fillColor="#673ab8"
        fillOpacity={0.9}
        title="Link to my github profile"
        target="_blank"
        className="My class"
      />
    </div>
  );
}

Options

Name Description Default
name Name of icon
href HTML Anchor Element Attribute "href" " # "
target HTML Anchor Element Attribute "target" "_blank"
className HTML Anchor Element "className" " "
title Tooltip text for icon name of icon
size Size for icon 24
fillColor Color for icon "currentcolor"
fillOpacity Opacity of icon. 0.1 to 1 0.7

All of these icons are from simple icons - https://simpleicons.org/ - https://github.com/simple-icons/simple-icons

License - https://github.com/simple-icons/simple-icons?tab=CC0-1.0-1-ov-file#cc0-10-universal

Legal Disclaimer : https://github.com/simple-icons/simple-icons/blob/develop/DISCLAIMER.md#disclaimer

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published