feat: add icon components
This commit is contained in:
javayhu
parent
f64cd08ec9
commit
3eb8ddcbc4
17
src/components/icons/authjs.tsx
Normal file
17
src/components/icons/authjs.tsx
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import type { SVGProps } from "react";
|
||||||
|
|
||||||
|
const AuthJSIcon = (props: SVGProps<SVGSVGElement>) => (
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="currentColor"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="1"
|
||||||
|
className="size-[34px]"
|
||||||
|
>
|
||||||
|
<title>Auth.js</title>
|
||||||
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
|
||||||
|
export default AuthJSIcon;
|
||||||
23
src/components/icons/bluesky.tsx
Normal file
23
src/components/icons/bluesky.tsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import React from "react";
|
||||||
|
import type { SVGProps } from "react";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* https://icon-sets.iconify.design/fa6-brands/bluesky/
|
||||||
|
*/
|
||||||
|
export function Fa6BrandsBluesky(props: SVGProps<SVGSVGElement>) {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width={512}
|
||||||
|
height={512}
|
||||||
|
viewBox="0 0 512 512"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<title>Bluesky</title>
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M111.8 62.2C170.2 105.9 233 194.7 256 242.4c23-47.6 85.8-136.4 144.2-180.2c42.1-31.6 110.3-56 110.3 21.8c0 15.5-8.9 130.5-14.1 149.2c-18.2 64.8-84.4 81.4-143.3 71.3C456 322 482.2 380 425.6 438c-107.4 110.2-154.3-27.6-166.3-62.9c-1.7-4.9-2.6-7.8-3.3-7.8s-1.6 3-3.3 7.8c-12 35.3-59 173.1-166.3 62.9c-56.5-58-30.4-116 72.5-133.5C100 314.6 33.8 298 15.7 233.1C10.4 214.4 1.5 99.4 1.5 83.9c0-77.8 68.2-53.4 110.3-21.8z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
23
src/components/icons/github.tsx
Normal file
23
src/components/icons/github.tsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import React from "react";
|
||||||
|
import type { SVGProps } from "react";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* https://icon-sets.iconify.design/fa6-brands/github/
|
||||||
|
*/
|
||||||
|
export function FaBrandsGitHub(props: SVGProps<SVGSVGElement>) {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width={46.5}
|
||||||
|
height={48}
|
||||||
|
viewBox="0 0 496 512"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<title>GitHub</title>
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6c-3.3.3-5.6-1.3-5.6-3.6c0-2 2.3-3.6 5.2-3.6c3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9c2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9c.3 2 2.9 3.3 5.9 2.6c2.9-.7 4.9-2.6 4.6-4.6c-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2c12.8 2.3 17.3-5.6 17.3-12.1c0-6.2-.3-40.4-.3-61.4c0 0-70 15-84.7-29.8c0 0-11.4-29.1-27.8-36.6c0 0-22.9-15.7 1.6-15.4c0 0 24.9 2 38.6 25.8c21.9 38.6 58.6 27.5 72.9 20.9c2.3-16 8.8-27.1 16-33.7c-55.9-6.2-112.3-14.3-112.3-110.5c0-27.5 7.6-41.3 23.6-58.9c-2.6-6.5-11.1-33.3 2.6-67.9c20.9-6.5 69 27 69 27c20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27c13.7 34.7 5.2 61.4 2.6 67.9c16 17.7 25.8 31.5 25.8 58.9c0 96.5-58.9 104.2-114.8 110.5c9.2 7.9 17 22.9 17 46.4c0 33.7-.3 75.4-.3 83.6c0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252C496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2c1.6 1.6 3.9 2.3 5.2 1c1.3-1 1-3.3-.7-5.2c-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9c1.6 1 3.6.7 4.3-.7c.7-1.3-.3-2.9-2.3-3.9c-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2c2.3 2.3 5.2 2.6 6.5 1c1.3-1.3.7-4.3-1.3-6.2c-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2c-1.4-2.3-4-3.3-5.6-2"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
23
src/components/icons/google.tsx
Normal file
23
src/components/icons/google.tsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import React from "react";
|
||||||
|
import type { SVGProps } from "react";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* https://icon-sets.iconify.design/fa6-brands/google/
|
||||||
|
*/
|
||||||
|
export function FaBrandsGoogle(props: SVGProps<SVGSVGElement>) {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width={45.75}
|
||||||
|
height={48}
|
||||||
|
viewBox="0 0 488 512"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<title>Google</title>
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M488 261.8C488 403.3 391.1 504 248 504C110.8 504 0 393.2 0 256S110.8 8 248 8c66.8 0 123 24.5 166.3 64.9l-67.5 64.9C258.5 52.6 94.3 116.6 94.3 256c0 86.5 69.1 156.6 153.7 156.6c98.2 0 135-70.4 140.8-106.9H248v-85.3h236.1c2.3 12.7 3.9 24.9 3.9 41.4"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
135
src/components/icons/icons.tsx
Normal file
135
src/components/icons/icons.tsx
Normal file
@ -0,0 +1,135 @@
|
|||||||
|
import {
|
||||||
|
ArrowRightIcon,
|
||||||
|
BadgeDollarSignIcon,
|
||||||
|
BookOpenIcon,
|
||||||
|
ChartLineIcon,
|
||||||
|
ChartNoAxesCombinedIcon,
|
||||||
|
CircleDollarSignIcon,
|
||||||
|
CircleUserRoundIcon,
|
||||||
|
ComponentIcon,
|
||||||
|
CreditCardIcon,
|
||||||
|
DatabaseIcon,
|
||||||
|
EyeIcon,
|
||||||
|
FileTextIcon,
|
||||||
|
FilterIcon,
|
||||||
|
GiftIcon,
|
||||||
|
GithubIcon,
|
||||||
|
GlobeIcon,
|
||||||
|
GridIcon,
|
||||||
|
HomeIcon,
|
||||||
|
ImageIcon,
|
||||||
|
LayoutDashboardIcon,
|
||||||
|
LayoutGridIcon,
|
||||||
|
LayoutPanelLeftIcon,
|
||||||
|
Loader2Icon,
|
||||||
|
type LucideIcon,
|
||||||
|
MailCheckIcon,
|
||||||
|
MailIcon,
|
||||||
|
MailboxIcon,
|
||||||
|
MapIcon,
|
||||||
|
NewspaperIcon,
|
||||||
|
NotebookPenIcon,
|
||||||
|
PaletteIcon,
|
||||||
|
RocketIcon,
|
||||||
|
SearchIcon,
|
||||||
|
SettingsIcon,
|
||||||
|
ShieldCheckIcon,
|
||||||
|
SmartphoneIcon,
|
||||||
|
SmileIcon,
|
||||||
|
SquareChartGanttIcon,
|
||||||
|
TagsIcon,
|
||||||
|
UploadIcon,
|
||||||
|
VideoIcon,
|
||||||
|
WandSparklesIcon,
|
||||||
|
WorkflowIcon,
|
||||||
|
WrenchIcon
|
||||||
|
} from "lucide-react";
|
||||||
|
import { FaBrandsGitHub } from "../icons/github";
|
||||||
|
import { FaBrandsGoogle } from "../icons/google";
|
||||||
|
import { LogosProductHunt } from "../icons/product-hunt";
|
||||||
|
import { FaBrandsXTwitter } from "../icons/twitter";
|
||||||
|
import AuthJSIcon from "./authjs";
|
||||||
|
import { Fa6BrandsBluesky } from "./bluesky";
|
||||||
|
import { NextjsIcon } from "./nextjs";
|
||||||
|
import { SimpleIconsResend } from "./resend";
|
||||||
|
import { SimpleIconsSanity } from "./sanity";
|
||||||
|
import { SimpleIconsShadcnui } from "./shadcnui";
|
||||||
|
import { SimpleIconsStripe } from "./stripe";
|
||||||
|
import { SimpleIconsTailwindcss } from "./tailwindcss";
|
||||||
|
import { SimpleIconsVercel } from "./vercel";
|
||||||
|
import { IonLogoYoutube } from "./youtube";
|
||||||
|
|
||||||
|
export type Icon = LucideIcon;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Lucide Icons
|
||||||
|
* https://lucide.dev/icons/
|
||||||
|
*
|
||||||
|
* 2. Radix Icons
|
||||||
|
* https://www.radix-ui.com/icons
|
||||||
|
*/
|
||||||
|
export const Icons = {
|
||||||
|
spinner: Loader2Icon,
|
||||||
|
|
||||||
|
// used by name
|
||||||
|
arrowRight: ArrowRightIcon,
|
||||||
|
search: SearchIcon,
|
||||||
|
category: LayoutGridIcon,
|
||||||
|
tag: TagsIcon,
|
||||||
|
blog: FileTextIcon,
|
||||||
|
features: WandSparklesIcon,
|
||||||
|
pricing: CreditCardIcon,
|
||||||
|
demo: RocketIcon,
|
||||||
|
showcase: LayoutGridIcon,
|
||||||
|
docs: BookOpenIcon,
|
||||||
|
globe: GlobeIcon,
|
||||||
|
home: HomeIcon,
|
||||||
|
dashboard: LayoutDashboardIcon,
|
||||||
|
submit: UploadIcon,
|
||||||
|
settings: SettingsIcon,
|
||||||
|
email: MailIcon,
|
||||||
|
layout: LayoutPanelLeftIcon,
|
||||||
|
component: ComponentIcon,
|
||||||
|
grid: GridIcon,
|
||||||
|
eye: EyeIcon,
|
||||||
|
rocket: RocketIcon,
|
||||||
|
image: ImageIcon,
|
||||||
|
smartphone: SmartphoneIcon,
|
||||||
|
palette: PaletteIcon,
|
||||||
|
chartLine: ChartLineIcon,
|
||||||
|
gift: GiftIcon,
|
||||||
|
user: CircleUserRoundIcon,
|
||||||
|
chartNoAxes: ChartNoAxesCombinedIcon,
|
||||||
|
|
||||||
|
map: MapIcon,
|
||||||
|
video: VideoIcon,
|
||||||
|
notebook: NotebookPenIcon,
|
||||||
|
mailcheck: MailCheckIcon,
|
||||||
|
mailbox: MailboxIcon,
|
||||||
|
newspaper: NewspaperIcon,
|
||||||
|
smile: SmileIcon,
|
||||||
|
wrench: WrenchIcon,
|
||||||
|
database: DatabaseIcon,
|
||||||
|
githubLucide: GithubIcon,
|
||||||
|
filter: FilterIcon,
|
||||||
|
money: BadgeDollarSignIcon,
|
||||||
|
sponsor: CircleDollarSignIcon,
|
||||||
|
shieldCheck: ShieldCheckIcon,
|
||||||
|
workflow: WorkflowIcon,
|
||||||
|
squareChartGantt: SquareChartGanttIcon,
|
||||||
|
|
||||||
|
github: FaBrandsGitHub,
|
||||||
|
google: FaBrandsGoogle,
|
||||||
|
twitter: FaBrandsXTwitter,
|
||||||
|
bluesky: Fa6BrandsBluesky,
|
||||||
|
youtube: IonLogoYoutube,
|
||||||
|
productHunt: LogosProductHunt,
|
||||||
|
nextjs: NextjsIcon,
|
||||||
|
authjs: AuthJSIcon,
|
||||||
|
shadcnui: SimpleIconsShadcnui,
|
||||||
|
tailwindcss: SimpleIconsTailwindcss,
|
||||||
|
sanity: SimpleIconsSanity,
|
||||||
|
resend: SimpleIconsResend,
|
||||||
|
stripe: SimpleIconsStripe,
|
||||||
|
vercel: SimpleIconsVercel,
|
||||||
|
};
|
||||||
78
src/components/icons/nextjs.tsx
Normal file
78
src/components/icons/nextjs.tsx
Normal file
@ -0,0 +1,78 @@
|
|||||||
|
import * as React from "react";
|
||||||
|
import type { SVGProps } from "react";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* https://svgl.app/
|
||||||
|
*/
|
||||||
|
export function NextjsIcon(props: SVGProps<SVGSVGElement>) {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
width="1em"
|
||||||
|
height="1em"
|
||||||
|
viewBox="0 0 180 180"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<title>Next.js</title>
|
||||||
|
<mask
|
||||||
|
id="mask0_408_139"
|
||||||
|
style={{
|
||||||
|
maskType: "alpha",
|
||||||
|
}}
|
||||||
|
maskUnits="userSpaceOnUse"
|
||||||
|
x={0}
|
||||||
|
y={0}
|
||||||
|
width={180}
|
||||||
|
height={180}
|
||||||
|
>
|
||||||
|
<circle cx={90} cy={90} r={90} fill="black" />
|
||||||
|
</mask>
|
||||||
|
<g mask="url(#mask0_408_139)">
|
||||||
|
<circle
|
||||||
|
cx={90}
|
||||||
|
cy={90}
|
||||||
|
r={87}
|
||||||
|
fill="black"
|
||||||
|
stroke="white"
|
||||||
|
strokeWidth={6}
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M149.508 157.52L69.142 54H54V125.97H66.1136V69.3836L139.999 164.845C143.333 162.614 146.509 160.165 149.508 157.52Z"
|
||||||
|
fill="url(#paint0_linear_408_139)"
|
||||||
|
/>
|
||||||
|
<rect
|
||||||
|
x={115}
|
||||||
|
y={54}
|
||||||
|
width={12}
|
||||||
|
height={72}
|
||||||
|
fill="url(#paint1_linear_408_139)"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<linearGradient
|
||||||
|
id="paint0_linear_408_139"
|
||||||
|
x1={109}
|
||||||
|
y1={116.5}
|
||||||
|
x2={144.5}
|
||||||
|
y2={160.5}
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<stop stopColor="white" />
|
||||||
|
<stop offset={1} stopColor="white" stopOpacity={0} />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient
|
||||||
|
id="paint1_linear_408_139"
|
||||||
|
x1={121}
|
||||||
|
y1={54}
|
||||||
|
x2={120.799}
|
||||||
|
y2={106.875}
|
||||||
|
gradientUnits="userSpaceOnUse"
|
||||||
|
>
|
||||||
|
<stop stopColor="white" />
|
||||||
|
<stop offset={1} stopColor="white" stopOpacity={0} />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
40
src/components/icons/product-hunt.tsx
Normal file
40
src/components/icons/product-hunt.tsx
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import type { SVGProps } from "react";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* https://icon-sets.iconify.design/logos/producthunt/
|
||||||
|
*/
|
||||||
|
export function LogosProductHunt(props: SVGProps<SVGSVGElement>) {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width={48}
|
||||||
|
height={48}
|
||||||
|
viewBox="0 0 256 256"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<title>Product Hunt</title>
|
||||||
|
<defs>
|
||||||
|
<linearGradient
|
||||||
|
id="logosProducthunt0"
|
||||||
|
x1="50%"
|
||||||
|
x2="50%"
|
||||||
|
y1="0%"
|
||||||
|
y2="100%"
|
||||||
|
>
|
||||||
|
<stop offset="0%" stopColor="#da552f" />
|
||||||
|
<stop offset="100%" stopColor="#d04b25" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g fill="none" fillRule="evenodd">
|
||||||
|
<path
|
||||||
|
fill="url(#logosProducthunt0)"
|
||||||
|
d="M128 256c70.694 0 128-57.306 128-128S198.694 0 128 0S0 57.306 0 128s57.306 128 128 128"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
fill="#fff"
|
||||||
|
d="M96 76.8v102.4h19.2v-32h29.056c19.296-.512 34.944-16.16 34.944-35.2c0-19.552-15.648-35.2-34.944-35.2zm48.493 51.2H115.2V96h29.293c8.563 0 15.507 7.168 15.507 16s-6.944 16-15.507 16"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
23
src/components/icons/resend.tsx
Normal file
23
src/components/icons/resend.tsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import React from "react";
|
||||||
|
import type { SVGProps } from "react";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* https://icon-sets.iconify.design/simple-icons/resend/
|
||||||
|
*/
|
||||||
|
export function SimpleIconsResend(props: SVGProps<SVGSVGElement>) {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width={48}
|
||||||
|
height={48}
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<title>Resend</title>
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M2.023 0v24h5.553v-8.434h2.998L15.326 24h6.65l-5.372-9.258a7.65 7.65 0 0 0 3.316-3.016q1.063-1.815 1.062-4.08q0-2.194-1.062-3.91q-1.063-1.747-2.95-2.742Q15.12 0 12.823 0Zm5.553 4.87h4.219q1.097 0 1.851.376q.788.378 1.2 1.098q.412.685.412 1.611c0 .926-.126 1.165-.378 1.645q-.343.72-1.03 1.13q-.651.379-1.542.38H7.576Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
23
src/components/icons/sanity.tsx
Normal file
23
src/components/icons/sanity.tsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import React from "react";
|
||||||
|
import type { SVGProps } from "react";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* https://icon-sets.iconify.design/simple-icons/sanity/
|
||||||
|
*/
|
||||||
|
export function SimpleIconsSanity(props: SVGProps<SVGSVGElement>) {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width={48}
|
||||||
|
height={48}
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<title>Sanity</title>
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M7.394 7.31a6 6 0 0 1-.833-.68c-.913-.91-1.38-2.067-1.38-3.568v-.575C6.699.929 9.039 0 11.828 0c5.394 0 8.515 2.8 9.285 6.74H16.22c-.54-1.554-1.89-2.764-4.352-2.764c-2.422 0-4.136 1.276-4.473 3.334h-.002ZM4.683 3.062c0 3.236 2.034 5.162 6.106 6.177l4.316.983c3.854.87 6.2 3.03 6.2 6.55a6.6 6.6 0 0 1-1.436 4.239c0-3.511-1.85-5.409-6.31-6.55l-4.236-.946c-3.393-.76-6.011-2.536-6.011-6.36a6.58 6.58 0 0 1 1.37-4.093ZM17.18 16.484c-.292 2.235-2.092 3.495-4.698 3.495c-2.314 0-4.048-.946-4.703-2.99H2.694C3.518 21.44 7.224 24 12.519 24c2.828 0 5.277-.87 6.85-2.439v-.55c0-1.66-.433-2.876-1.342-3.816a5.5 5.5 0 0 0-.847-.71z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
23
src/components/icons/shadcnui.tsx
Normal file
23
src/components/icons/shadcnui.tsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import React from "react";
|
||||||
|
import type { SVGProps } from "react";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* https://icon-sets.iconify.design/simple-icons/shadcnui/
|
||||||
|
*/
|
||||||
|
export function SimpleIconsShadcnui(props: SVGProps<SVGSVGElement>) {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width={48}
|
||||||
|
height={48}
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<title>Shadcn UI</title>
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M22.219 11.784L11.784 22.219a1.045 1.045 0 0 0 1.476 1.476L23.695 13.26a1.045 1.045 0 0 0-1.476-1.476M20.132.305L.305 20.132a1.045 1.045 0 0 0 1.476 1.476L21.608 1.781A1.045 1.045 0 0 0 20.132.305"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
23
src/components/icons/stripe.tsx
Normal file
23
src/components/icons/stripe.tsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import React from "react";
|
||||||
|
import type { SVGProps } from "react";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* https://icon-sets.iconify.design/simple-icons/stripe/
|
||||||
|
*/
|
||||||
|
export function SimpleIconsStripe(props: SVGProps<SVGSVGElement>) {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width={48}
|
||||||
|
height={48}
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<title>Stripe</title>
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M13.976 9.15c-2.172-.806-3.356-1.426-3.356-2.409c0-.831.683-1.305 1.901-1.305c2.227 0 4.515.858 6.09 1.631l.89-5.494C18.252.975 15.697 0 12.165 0C9.667 0 7.589.654 6.104 1.872C4.56 3.147 3.757 4.992 3.757 7.218c0 4.039 2.467 5.76 6.476 7.219c2.585.92 3.445 1.574 3.445 2.583c0 .98-.84 1.545-2.354 1.545c-1.875 0-4.965-.921-6.99-2.109l-.9 5.555C5.175 22.99 8.385 24 11.714 24c2.641 0 4.843-.624 6.328-1.813c1.664-1.305 2.525-3.236 2.525-5.732c0-4.128-2.524-5.851-6.594-7.305z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
23
src/components/icons/tailwindcss.tsx
Normal file
23
src/components/icons/tailwindcss.tsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import React from "react";
|
||||||
|
import type { SVGProps } from "react";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* https://icon-sets.iconify.design/simple-icons/tailwindcss/
|
||||||
|
*/
|
||||||
|
export function SimpleIconsTailwindcss(props: SVGProps<SVGSVGElement>) {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width={48}
|
||||||
|
height={48}
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<title>Tailwind CSS</title>
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M12.001 4.8q-4.8 0-6 4.8q1.8-2.4 4.2-1.8c.913.228 1.565.89 2.288 1.624C13.666 10.618 15.027 12 18.001 12q4.8 0 6-4.8q-1.8 2.4-4.2 1.8c-.913-.228-1.565-.89-2.288-1.624C16.337 6.182 14.976 4.8 12.001 4.8m-6 7.2q-4.8 0-6 4.8q1.8-2.4 4.2-1.8c.913.228 1.565.89 2.288 1.624c1.177 1.194 2.538 2.576 5.512 2.576q4.8 0 6-4.8q-1.8 2.4-4.2 1.8c-.913-.228-1.565-.89-2.288-1.624C10.337 13.382 8.976 12 6.001 12"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
23
src/components/icons/twitter.tsx
Normal file
23
src/components/icons/twitter.tsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import React from "react";
|
||||||
|
import type { SVGProps } from "react";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* https://icon-sets.iconify.design/fa6-brands/x-twitter/
|
||||||
|
*/
|
||||||
|
export function FaBrandsXTwitter(props: SVGProps<SVGSVGElement>) {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width={48}
|
||||||
|
height={48}
|
||||||
|
viewBox="0 0 512 512"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<title>X (Twitter)</title>
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M389.2 48h70.6L305.6 224.2L487 464H345L233.7 318.6L106.5 464H35.8l164.9-188.5L26.8 48h145.6l100.5 132.9zm-24.8 373.8h39.1L151.1 88h-42z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
20
src/components/icons/vercel.tsx
Normal file
20
src/components/icons/vercel.tsx
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
import React from "react";
|
||||||
|
import type { SVGProps } from "react";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* https://icon-sets.iconify.design/simple-icons/vercel/
|
||||||
|
*/
|
||||||
|
export function SimpleIconsVercel(props: SVGProps<SVGSVGElement>) {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width={48}
|
||||||
|
height={48}
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<title>Vercel</title>
|
||||||
|
<path fill="currentColor" d="M24 22.525H0l12-21.05z" />
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
23
src/components/icons/youtube.tsx
Normal file
23
src/components/icons/youtube.tsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import React from "react";
|
||||||
|
import type { SVGProps } from "react";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* https://icon-sets.iconify.design/ion/logo-youtube/
|
||||||
|
*/
|
||||||
|
export function IonLogoYoutube(props: SVGProps<SVGSVGElement>) {
|
||||||
|
return (
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width={48}
|
||||||
|
height={48}
|
||||||
|
viewBox="0 0 512 512"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
<title>YouTube</title>
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M508.64 148.79c0-45-33.1-81.2-74-81.2C379.24 65 322.74 64 265 64h-18c-57.6 0-114.2 1-169.6 3.6C36.6 67.6 3.5 104 3.5 149C1 184.59-.06 220.19 0 255.79q-.15 53.4 3.4 106.9c0 45 33.1 81.5 73.9 81.5c58.2 2.7 117.9 3.9 178.6 3.8q91.2.3 178.6-3.8c40.9 0 74-36.5 74-81.5c2.4-35.7 3.5-71.3 3.4-107q.34-53.4-3.26-106.9M207 353.89v-196.5l145 98.2Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user