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