()
| 2 | import { transition } from "../../utilities/animationConstants"; |
| 3 | |
| 4 | export const SunIcon = () => { |
| 5 | const whileTap = { scale: 0.95, rotate: 15 }; |
| 6 | |
| 7 | const raysVariants = { |
| 8 | initial: { rotate: 45 }, |
| 9 | animate: { rotate: 0, transition }, |
| 10 | }; |
| 11 | |
| 12 | const coreVariants = { |
| 13 | initial: { scale: 1.5 }, |
| 14 | animate: { scale: 1, transition }, |
| 15 | }; |
| 16 | |
| 17 | return ( |
| 18 | <motion.svg |
| 19 | key="sun" |
| 20 | width="1em" |
| 21 | height="1em" |
| 22 | viewBox="0 0 24 24" |
| 23 | fill="none" |
| 24 | xmlns="http://www.w3.org/2000/svg" |
| 25 | whileTap={whileTap} |
| 26 | // Centers the rotation anchor point vertically & horizontally |
| 27 | style={{ originX: "50%", originY: "50%" }} |
| 28 | > |
| 29 | <motion.circle |
| 30 | cx="11.9998" |
| 31 | cy="11.9998" |
| 32 | r="5.75375" |
| 33 | fill="currentColor" |
| 34 | initial="initial" |
| 35 | animate="animate" |
| 36 | variants={coreVariants} |
| 37 | /> |
| 38 | <motion.g initial="initial" animate="animate" variants={raysVariants}> |
| 39 | <circle |
| 40 | cx="3.08982" |
| 41 | cy="6.85502" |
| 42 | r="1.71143" |
| 43 | transform="rotate(-60 3.08982 6.85502)" |
| 44 | fill="currentColor" |
| 45 | /> |
| 46 | <circle |
| 47 | cx="3.0903" |
| 48 | cy="17.1436" |
| 49 | r="1.71143" |
| 50 | transform="rotate(-120 3.0903 17.1436)" |
| 51 | fill="currentColor" |
| 52 | /> |
| 53 | <circle cx="12" cy="22.2881" r="1.71143" fill="currentColor" /> |
| 54 | <circle |
| 55 | cx="20.9101" |
| 56 | cy="17.1436" |
| 57 | r="1.71143" |
| 58 | transform="rotate(-60 20.9101 17.1436)" |
| 59 | fill="currentColor" |
| 60 | /> |
| 61 | <circle |
nothing calls this directly
no outgoing calls
no test coverage detected