mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
94 lines
2.6 KiB
TypeScript
94 lines
2.6 KiB
TypeScript
const UserIcon = `export const UserIcon = ({
|
|
fill = 'currentColor',
|
|
filled,
|
|
size,
|
|
height,
|
|
width,
|
|
label,
|
|
...props
|
|
}) => {
|
|
return (
|
|
<svg
|
|
data-name="Iconly/Curved/Profile"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
width={size || width || 24}
|
|
height={size || height || 24}
|
|
{...props}
|
|
>
|
|
<g
|
|
fill="none"
|
|
stroke={fill}
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeMiterlimit={10}
|
|
strokeWidth={1.5}
|
|
>
|
|
<path
|
|
data-name="Stroke 1"
|
|
d="M11.845 21.662C8.153 21.662 5 21.088 5 18.787s3.133-4.425 6.845-4.425c3.692 0 6.845 2.1 6.845 4.4s-3.134 2.9-6.845 2.9z"
|
|
/>
|
|
<path
|
|
data-name="Stroke 3"
|
|
d="M11.837 11.174a4.372 4.372 0 10-.031 0z"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
);
|
|
};`;
|
|
|
|
const CameraIcon = `export const CameraIcon = ({
|
|
fill = 'currentColor',
|
|
filled,
|
|
size,
|
|
height,
|
|
width,
|
|
label,
|
|
...props
|
|
}) => {
|
|
return (
|
|
<svg
|
|
width={size || width || 24}
|
|
height={size || height || 24}
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
{...props}
|
|
>
|
|
<path
|
|
fillRule="evenodd"
|
|
clipRule="evenodd"
|
|
d="M17.44 6.236c.04.07.11.12.2.12 2.4 0 4.36 1.958 4.36 4.355v5.934A4.368 4.368 0 0117.64 21H6.36A4.361 4.361 0 012 16.645V10.71a4.361 4.361 0 014.36-4.355c.08 0 .16-.04.19-.12l.06-.12.106-.222a97.79 97.79 0 01.714-1.486C7.89 3.51 8.67 3.01 9.64 3h4.71c.97.01 1.76.51 2.22 1.408.157.315.397.822.629 1.31l.141.299.1.22zm-.73 3.836c0 .5.4.9.9.9s.91-.4.91-.9-.41-.909-.91-.909-.9.41-.9.91zm-6.44 1.548c.47-.47 1.08-.719 1.73-.719.65 0 1.26.25 1.72.71.46.459.71 1.068.71 1.717A2.438 2.438 0 0112 15.756c-.65 0-1.26-.25-1.72-.71a2.408 2.408 0 01-.71-1.717v-.01c-.01-.63.24-1.24.7-1.699zm4.5 4.485a3.91 3.91 0 01-2.77 1.15 3.921 3.921 0 01-3.93-3.926 3.865 3.865 0 011.14-2.767A3.921 3.921 0 0112 9.402c1.05 0 2.04.41 2.78 1.15.74.749 1.15 1.738 1.15 2.777a3.958 3.958 0 01-1.16 2.776z"
|
|
fill={fill}
|
|
/>
|
|
</svg>
|
|
);
|
|
};`;
|
|
|
|
const App = `import {Button} from "@nextui-org/react";
|
|
import {UserIcon} from './UserIcon';
|
|
import {CameraIcon} from './CameraIcon';
|
|
|
|
export default function App() {
|
|
return (
|
|
<div className="flex gap-4 items-center">
|
|
<Button color="success" endContent={<CameraIcon/>}>
|
|
Take a photo
|
|
</Button>
|
|
<Button color="danger" variant="bordered" startContent={<UserIcon/>}>
|
|
Delete user
|
|
</Button>
|
|
</div>
|
|
);
|
|
}`;
|
|
|
|
const react = {
|
|
"/App.jsx": App,
|
|
"/UserIcon.jsx": UserIcon,
|
|
"/CameraIcon.jsx": CameraIcon,
|
|
};
|
|
|
|
export default {
|
|
...react,
|
|
};
|