Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/phothinmg/hono-social-icons
Social icons with link for Hono JSX
https://github.com/phothinmg/hono-social-icons
components deno hono icons jsx
Last synced: 3 days ago
JSON representation
Social icons with link for Hono JSX
- Host: GitHub
- URL: https://github.com/phothinmg/hono-social-icons
- Owner: phothinmg
- License: apache-2.0
- Created: 2024-06-17T18:30:48.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-06-17T22:30:33.000Z (7 months ago)
- Last Synced: 2024-11-09T03:32:03.955Z (about 2 months ago)
- Topics: components, deno, hono, icons, jsx
- Language: TypeScript
- Homepage:
- Size: 19.5 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Social icons with links for [Hono](https://hono.dev/) Jsx (Deno Only)
**Icons are get from https://tabler.io/**
---
### Install
#### From JSR
```bash
deno add @ptm/hono-social-icons
```
```ts
import { SocialIcon } from "@ptm/hono-social-icons";
```
#### From denoland/x
```ts
import { SocialIcon } from "https://deno.land/x/[email protected]/src/mod.ts";
```
---
### Setup
#### Hono jsx runtime in deno.json.
```json
{
"compilerOptions": {
"jsx": "precompile",
"jsxImportSource": "jsr:@hono/hono@^4.4.6/jsx"
}
}
```
#### CSS link in ` ` (Optional)
```html
```
**You can styled to class `.clink`**
Default Style
```css
: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;
}
```
***
## [Types](https://jsr.io/@ptm/[email protected]/doc/~/SocialIcon#variable_SocialIcon)
```ts
FC<{ name: string; href: string; size?: number; stoke?: number }>;
```
***
### Example
```ts
```
- 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)
#### Text for available icons
- "github"
- "twitter"
- "linkedin"
- "facebook"
- "whatsapp"
- "wordpress"
- "wechat"
- "gitlab"
- "bitbucket"
- "discord"
***