joinlemmy-site/src/shared/components/icon.tsx
Dessalines d17c4d7d2f
New tailwind-based joinlemmy-site (#243)
* Starting on new tailwind based joinlemmy-site.

* Formatting fix.

* Adding follow communities block.

* Adding a few more blocks.

* Finishing up blocks.

* Adding a few more pages.

* Adding apps page.

* Almost done with donation page.

* Adding most of instances page.

* Trying to fix CI 1.

* Adding navbar and footer.

* Adding bottom spacer.

* Finishing up more info modal.

* Adding icons to main page.

* Eruda only in development mode.

* Finishing up main page, starting to work on recs.

* Adding main images.

* Adding images 2.

* Starting to add filters.

* Finishing up helper modal.

* Adding topic icons.

* Adding more instances.

* Fixing recommended.

* Forgot to add instance picker.

* Adding world background image.

* Adding alexandrite.

* Adding funding goal block.

* Fix dockerfile.

* Upgrading deps.

* Fixing package json.

* Updating coders, sponsors.

* Fixing mobile margins.

* Fixing navbar auto-close when clicked.

* Removing todo.

* Removing some useless instance helper links.

* Fixing news titling.

* Addressing PR comments.

* Updating instance stats.

* Fixing class -> className

* Fixing sm:max directives.

* Make instance images links to their sites.

* Use ubuntu font.

* Addressing PR comments.

* Adding a few more android apps.

* Adding thunder and combustible apps.

* Fixing z index.

* Add a warning alert for closed source apps.

* Adding MLMYM app. Fixes #213

* Fixing i18n key.

* Adding QR codes for cryptos. Fixes #219

* Addressing PR comments.

* Fixing news preview.

* Adding registration mode to details modal. Fixes #153

* Filter out bot instances.

* Using glide carousel.

* Adding glide min css.

* Adding donation platform fetching. Fixes #248

* Prettying glide css.

* Change dev goal to 3

* Adding sign up button.

* Minifying docker image.

* Removing sortpack.
2023-10-31 09:31:03 -04:00

23 lines
490 B
TypeScript

export enum IconSize {
Small = "w-3 h-3",
Medium = "w-4 h-4",
Large = "w-6 h-6",
Largest = "w-8 h-8",
}
interface IconProps {
icon: string;
size?: IconSize;
classes?: string;
}
export const Icon = ({ icon, size = IconSize.Medium, classes }: IconProps) => (
<svg className={`icon ${size} ${classes}`}>
<title>{icon}</title>
<use xlinkHref={`#icon-${icon}`}></use>
</svg>
);
export const Spinner = () => (
<Icon icon="spinner" classes="icon-spinner spin" />
);