mirror of
https://github.com/nextui-org/nextui.git
synced 2025-12-08 19:26:11 +00:00
75 lines
2.4 KiB
TypeScript
75 lines
2.4 KiB
TypeScript
export const NotificationIcon = `export const NotificationIcon = ({size, height, width, ...props}) => {
|
|
return (
|
|
<svg
|
|
fill="none"
|
|
height={size || height || 24}
|
|
viewBox="0 0 24 24"
|
|
width={size || width || 24}
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
{...props}
|
|
>
|
|
<path
|
|
clipRule="evenodd"
|
|
d="M18.707 8.796c0 1.256.332 1.997 1.063 2.85.553.628.73 1.435.73 2.31 0 .874-.287 1.704-.863 2.378a4.537 4.537 0 01-2.9 1.413c-1.571.134-3.143.247-4.736.247-1.595 0-3.166-.068-4.737-.247a4.532 4.532 0 01-2.9-1.413 3.616 3.616 0 01-.864-2.378c0-.875.178-1.682.73-2.31.754-.854 1.064-1.594 1.064-2.85V8.37c0-1.682.42-2.781 1.283-3.858C7.861 2.942 9.919 2 11.956 2h.09c2.08 0 4.204.987 5.466 2.625.82 1.054 1.195 2.108 1.195 3.745v.426zM9.074 20.061c0-.504.462-.734.89-.833.5-.106 3.545-.106 4.045 0 .428.099.89.33.89.833-.025.48-.306.904-.695 1.174a3.635 3.635 0 01-1.713.731 3.795 3.795 0 01-1.008 0 3.618 3.618 0 01-1.714-.732c-.39-.269-.67-.694-.695-1.173z"
|
|
fill='currentColor'
|
|
fillRule="evenodd"
|
|
/>
|
|
</svg>
|
|
);
|
|
};`;
|
|
|
|
export const CheckIcon = `export const CheckIcon = ({
|
|
size,
|
|
height,
|
|
width,
|
|
...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 d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z" fill="currentColor"/>
|
|
</svg>
|
|
);
|
|
};`;
|
|
|
|
const App = `import {Chip} from "@nextui-org/react";
|
|
import {NotificationIcon} from "./NotificationIcon";
|
|
import {CheckIcon} from "./CheckIcon";
|
|
|
|
export default function App() {
|
|
return (
|
|
<div className="flex gap-4">
|
|
<Chip
|
|
startContent={<CheckIcon size={18} />}
|
|
variant="faded"
|
|
color="success"
|
|
>
|
|
Chip
|
|
</Chip>
|
|
<Chip
|
|
endContent={<NotificationIcon size={18} />}
|
|
variant="flat"
|
|
color="secondary"
|
|
>
|
|
Chip
|
|
</Chip>
|
|
</div>
|
|
);
|
|
}`;
|
|
|
|
const react = {
|
|
"/App.jsx": App,
|
|
"/NotificationIcon.jsx": NotificationIcon,
|
|
"/CheckIcon.jsx": CheckIcon,
|
|
};
|
|
|
|
export default {
|
|
...react,
|
|
};
|