Logo easter egg

components/icons/Discord.tsx

@@ -1,25 +1,8 @@
-export default function Discord(props: JSX.IntrinsicElements["svg"]) {
+export default function Discord(props: JSX.IntrinsicElements["img"]) {
   return (
-    <svg
-      fill="currentColor"
-      viewBox="0 0 292 80"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <clipPath id="a">
-        <path d="m0 11.7646h292v56.4706h-292z" />
-      </clipPath>
-      <g clipPath="url(#a)">
-        <path d="m61.7958 16.494c-4.7222-2.2094-9.7714-3.8151-15.0502-4.7294-.6483 1.1721-1.4057 2.7486-1.9279 4.0027-5.6115-.8439-11.1714-.8439-16.6797 0-.5221-1.2541-1.2967-2.8306-1.9508-4.0027-5.2845.9143-10.3395 2.5259-15.0617 4.7411-9.52472 14.3931-12.106715 28.4287-10.815715 42.265 6.317295 4.7176 12.439515 7.5834 18.458415 9.4587 1.4861-2.0453 2.8115-4.2195 3.9533-6.5109-2.1746-.8263-4.2574-1.846-6.2254-3.0298.5221-.3868 1.0328-.7912 1.5262-1.2073 12.0034 5.6143 25.0454 5.6143 36.9054 0 .4992.4161 1.0098.8205 1.5262 1.2073-1.9738 1.1896-4.0623 2.2093-6.2369 3.0357 1.1418 2.2855 2.4615 4.4656 3.9533 6.5108 6.0247-1.8753 12.1526-4.741 18.4699-9.4645 1.5148-16.0398-2.5877-29.9465-10.8444-42.2767zm-37.439 33.7675c-3.6033 0-6.5583-3.3639-6.5583-7.4603s2.8919-7.4661 6.5583-7.4661c3.6665 0 6.6214 3.3638 6.5583 7.4661.0057 4.0964-2.8918 7.4603-6.5583 7.4603zm24.2364 0c-3.6033 0-6.5583-3.3639-6.5583-7.4603s2.8918-7.4661 6.5583-7.4661c3.6664 0 6.6214 3.3638 6.5583 7.4661 0 4.0964-2.8919 7.4603-6.5583 7.4603z" />
-        <path d="m98.0293 26.1707h15.6637c3.776 0 6.966.6036 9.583 1.805 2.61 1.2013 4.567 2.8774 5.864 5.0223 1.296 2.1449 1.95 4.6004 1.95 7.3665 0 2.7075-.677 5.163-2.031 7.3606-1.354 2.2035-3.414 3.9441-6.185 5.2275s-6.203 1.928-10.305 1.928h-14.5397zm14.3787 21.4138c2.542 0 4.499-.6505 5.864-1.9457 1.366-1.301 2.049-3.0708 2.049-5.3153 0-2.0805-.609-3.739-1.825-4.9814s-3.058-1.8694-5.52-1.8694h-4.9v14.1118z" />
-        <path d="m154.541 54.8456c-2.169-.5743-4.126-1.4065-5.864-2.5024v-6.8097c1.314 1.0372 3.075 1.8929 5.284 2.5668 2.209.6681 4.344 1.0021 6.409 1.0021.964 0 1.693-.1289 2.186-.3868.494-.2578.741-.5684.741-.9259 0-.4102-.132-.7501-.402-1.0256-.27-.2754-.792-.504-1.566-.6974l-4.82-1.1076c-2.76-.6563-4.717-1.5647-5.881-2.7309-1.165-1.1604-1.745-2.6841-1.745-4.5711 0-1.5882.505-2.9653 1.527-4.1433 1.015-1.1779 2.461-2.0863 4.337-2.7251 1.877-.6446 4.068-.9669 6.587-.9669 2.249 0 4.309.2461 6.186.7384 1.876.4923 3.425 1.1193 4.659 1.887v6.4406c-1.263-.7677-2.709-1.3713-4.361-1.8285-1.647-.4512-3.339-.6739-5.084-.6739-2.519 0-3.775.4395-3.775 1.3127 0 .4103.195.715.585.9201s1.107.4161 2.146.6388l4.016.7384c2.623.463 4.579 1.2776 5.864 2.4379 1.286 1.1604 1.928 2.8775 1.928 5.1513 0 2.4906-1.061 4.4656-3.19 5.9307s-5.147 2.1976-9.06 2.1976c-2.301-.0058-4.538-.293-6.707-.8673z" />
-        <path d="m182.978 53.9839c-2.3-1.1487-4.039-2.7075-5.198-4.6766s-1.744-4.1843-1.744-6.6457c0-2.4613.602-4.6648 1.807-6.6046s2.972-3.4635 5.302-4.5711c2.329-1.1076 5.112-1.6585 8.354-1.6585 4.016 0 7.35.8615 10.001 2.5844v7.5072c-.935-.6564-2.026-1.1897-3.271-1.5999s-2.576-.6154-3.999-.6154c-2.49 0-4.435.463-5.841 1.3948s-2.111 2.1449-2.111 3.651c0 1.4768.682 2.6841 2.048 3.6335 1.366.9435 3.345 1.4182 5.944 1.4182 1.337 0 2.657-.1993 3.959-.5919 1.297-.3985 2.416-.8849 3.351-1.4593v7.261c-2.943 1.805-6.357 2.7075-10.242 2.7075-3.27-.0117-6.059-.586-8.36-1.7346z" />
-        <path d="m211.518 53.9841c-2.318-1.1486-4.085-2.7192-5.302-4.7176-1.216-1.9984-1.83-4.2253-1.83-6.6867 0-2.4613.608-4.659 1.83-6.587 1.222-1.9281 2.978-3.4401 5.285-4.536 2.3-1.0959 5.049-1.6409 8.233-1.6409 3.185 0 5.933.545 8.234 1.6409s4.057 2.5962 5.262 4.5125c1.205 1.9164 1.807 4.114 1.807 6.6047 0 2.4613-.602 4.6883-1.807 6.6866-1.205 1.9984-2.967 3.569-5.285 4.7177-2.318 1.1486-5.055 1.7229-8.216 1.7229-3.162 0-5.899-.5685-8.211-1.7171zm12.204-7.2786c.976-.9962 1.469-2.3148 1.469-3.9557s-.488-2.9478-1.469-3.9148c-.975-.9728-2.307-1.4592-3.993-1.4592-1.716 0-3.059.4864-4.04 1.4592-.975.9729-1.463 2.2739-1.463 3.9148s.488 2.9595 1.463 3.9557c.976.9963 2.324 1.5003 4.04 1.5003 1.686-.0059 3.018-.504 3.993-1.5003z" />
-        <path d="m259.17 31.3395v8.8609c-1.021-.6857-2.341-1.0256-3.976-1.0256-2.141 0-3.793.6623-4.941 1.9867-1.153 1.3245-1.727 3.3873-1.727 6.1768v7.5482h-9.84v-23.9982h9.64v7.6302c.533-2.7896 1.4-4.8465 2.593-6.1769 1.188-1.3244 2.725-1.9866 4.596-1.9866 1.417 0 2.634.3282 3.655.9845z" />
-        <path d="m291.864 25.3503v29.5363h-9.841v-5.3739c-.832 2.0218-2.094 3.5631-3.792 4.6179-1.699 1.0491-3.799 1.5765-6.289 1.5765-2.226 0-4.165-.5509-5.824-1.6585-1.658-1.1076-2.937-2.6254-3.838-4.5535-.895-1.9281-1.349-4.1081-1.349-6.546-.028-2.5141.448-4.7704 1.429-6.7688.976-1.9984 2.358-3.5572 4.137-4.6766 1.779-1.1193 3.81-1.6819 6.088-1.6819 4.688 0 7.832 2.0804 9.438 6.2354v-10.7069zm-11.309 21.1912c1.004-.9963 1.503-2.2914 1.503-3.8737 0-1.5296-.488-2.7779-1.463-3.7331-.976-.9552-2.313-1.4358-3.994-1.4358-1.658 0-2.983.4864-3.976 1.4592-.993.9729-1.486 2.2328-1.486 3.7917s.493 2.8306 1.486 3.8151 2.301 1.4768 3.936 1.4768c1.658-.0058 2.989-.504 3.994-1.5002z" />
-        <path d="m139.382 33.4432c2.709 0 4.906-2.0151 4.906-4.5008s-2.197-4.5007-4.906-4.5007c-2.71 0-4.906 2.015-4.906 4.5007s2.196 4.5008 4.906 4.5008z" />
-        <path d="m134.472 36.5435c3.006 1.3244 6.736 1.383 9.811 0v18.4719h-9.811z" />
-      </g>
-    </svg>
+    <div>
+      <img src="/docs/images/discord_text_white.png" className={`dark:block hidden ${props.className}`} onMouseEnter={e => (e.target as HTMLImageElement).src = "/docs/images/discord_text_white.gif"} onMouseLeave={e => (e.target as HTMLImageElement).src = "/docs/images/discord_text_white.png"}/>
+      <img src="/docs/images/discord_text_black.png" className={`dark:hidden ${props.className}`} onMouseEnter={e => (e.target as HTMLImageElement).src = "/docs/images/discord_text_black.gif"} onMouseLeave={e => (e.target as HTMLImageElement).src = "/docs/images/discord_text_black.png"}/>
+    </div>
   );
 }