npm i jsx-social-icons
pnpm i jsx-social-icons
yarn add jsx-social-icons
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>
);
}
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>
);
}
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