Social icons with links for Hono Jsx (Deno Only)
Icons are get from https://tabler.io/
deno add @ptm/hono-social-iconsimport { SocialIcon } from "@ptm/hono-social-icons";import { SocialIcon } from "https://deno.land/x/[email protected]/src/mod.ts";{
"compilerOptions": {
"jsx": "precompile",
"jsxImportSource": "jsr:@hono/hono@^4.4.6/jsx"
}
}<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/phothinmg/master-repo@main/hono-icons/sicons.css"
type="text/css"
/>You can styled to class .clink
Default Style
:root {
--clink-color: #585858;
}
html[data-theme="light"] {
--clink-color: #585858;
}
html[data-theme="dark"] {
--clink-color: #ababab;
}
.clink {
color: var(--clink-color);
text-decoration: none;
}
.clink:hover {
color: goldenrod;
}FC<{ name: string; href: string; size?: number; stoke?: number }>;<SocialIcon name={"github"} href={"https://github.com/--"} size={30} />
<SocialIcon name={"twitter"} href={"link_to_profile"} size={18} stoke={1.5} />
<SocialIcon name={"discord"} href={"link_to_profile"} />- name: Name of social , Required
- href: URL to social profile , Required
- size: Size of icon , Optional , default 24
- stoke: Size of stoke width , Optional , default 2 (limit =< 2)
- "github"
- "twitter"
- "linkedin"
- "facebook"
- "whatsapp"
- "wordpress"
- "wechat"
- "gitlab"
- "bitbucket"
- "discord"