Avatar
Install
npm install @svg-animated-icons/reactCLI
Copy an icon component straight into your project — shadcn-style. Replace {icon} with an icon name like arrow-left.
terminal
npx @svg-animated-icons/cli add {icon} --react| Flag | Description |
|---|---|
--dest <dir> | Destination directory (default: components/animated-icons) |
Or copy the component with the CLI
CLI
npx @svg-animated-icons/cli add avatar --reactCode
React
// Generated by @svg-animated-icons/cli
// You own this file — edit it freely.
import React from "react";
type Props = {
disableHover?: boolean;
className?: string;
};
export function AvatarIcon({ disableHover, className }: Props) {
const classes = [
"ai-avatar-icon",
disableHover ? "no-hover" : "",
className ?? "",
]
.filter(Boolean)
.join(" ");
return (
<>
<style>{`
.ai-avatar-icon {
width: 1em;
height: 1em;
display: inline-block;
cursor: pointer;
overflow: visible;
}
.ai-avatar-icon * {
transform-box: fill-box;
}
.ai-avatar-icon .head {
transform-origin: center;
}
.ai-avatar-icon:not(.no-hover):hover .head {
animation: ai-avatar-motion-1 700ms ease-in-out;
}
.ai-avatar-icon.no-hover * {
transform: none;
opacity: 1;
animation: none;
}
@keyframes ai-avatar-motion-1 {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-0.75px);
}
}
`}</style>
<svg
xmlns="http://www.w3.org/2000/svg"
className={classes}
viewBox="0 0 15 15"
fill="none"
>
<path className="body" fillRule="evenodd" clipRule="evenodd" d="M7.49908 0.87706C11.1565 0.87706 14.1217 3.84179 14.1221 7.49913C14.1221 11.1568 11.1567 14.1222 7.49908 14.1222C3.84175 14.1218 0.877014 11.1565 0.877014 7.49913C0.877426 3.84205 3.842 0.877471 7.49908 0.87706ZM7.50006 9.97472C6.01506 9.9748 4.7185 10.78 4.02057 11.9786C4.98131 12.7259 6.18779 13.1718 7.49908 13.172C8.81087 13.172 10.0176 12.7253 10.9786 11.9776C10.2804 10.7797 8.98458 9.97474 7.50006 9.97472ZM7.49908 1.82628C4.36667 1.82669 1.82664 4.36672 1.82623 7.49913C1.82623 8.97122 2.38807 10.3122 3.30768 11.3204C4.19121 9.94086 5.73848 9.02558 7.50006 9.0255C9.26117 9.02552 10.8078 9.94052 11.6915 11.3194C12.6107 10.3113 13.1719 8.97095 13.1719 7.49913C13.1715 4.36647 10.6318 1.82628 7.49908 1.82628Z" fill="currentColor"/>
<path className="head" fillRule="evenodd" clipRule="evenodd" d="M7.50006 4.15538C8.7979 4.15542 9.84967 5.20714 9.84967 6.50499C9.84961 7.80279 8.79786 8.85456 7.50006 8.8546C6.20223 8.8546 5.15051 7.80281 5.15045 6.50499C5.15045 5.20712 6.20219 4.15538 7.50006 4.15538ZM7.50006 5.1046C6.72686 5.1046 6.09967 5.73179 6.09967 6.50499C6.09973 7.27814 6.7269 7.90538 7.50006 7.90538C8.27319 7.90534 8.9004 7.27812 8.90045 6.50499C8.90045 5.73181 8.27323 5.10464 7.50006 5.1046Z" fill="currentColor"/>
</svg>
</>
);
}