Iconjar Logo

// 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 IconjarLogoIcon({ disableHover, className }: Props) {
  const classes = [
    "ai-iconjar-logo-icon",
    disableHover ? "no-hover" : "",
    className ?? "",
  ]
    .filter(Boolean)
    .join(" ");

  return (
    <>
      <style>{`
.ai-iconjar-logo-icon {
  width: 1em;
  height: 1em;
  display: inline-block;
  cursor: pointer;
  overflow: visible;
}

.ai-iconjar-logo-icon * {
  transform-box: fill-box;
}

.ai-iconjar-logo-icon.no-hover * {
  transform: none;
  opacity: 1;
  animation: none;
}

.ai-iconjar-logo-icon .lid {
  transform-origin: center;
}

.ai-iconjar-logo-icon:not(.no-hover):hover .lid {
  animation: ai-iconjar-logo-lift 700ms ease-in-out;
}

@keyframes ai-iconjar-logo-lift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.7px); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="jar" d="M12.0003 4.00037C12.6947 4.0007 12.8282 4.86472 12.1331 5.1283C11.6413 5.33268 11.7283 5.83053 12.1331 6.09412C12.8281 6.53308 13.0891 7.32374 12.9739 8.05603L12.1624 12.4779L12.1233 12.639C11.894 13.4341 11.1793 14.0004 10.3372 14.0004H4.66045L4.49443 13.9926C3.72607 13.9237 3.08945 13.3812 2.87529 12.639L2.83623 12.4779L2.02471 8.05603C1.90415 7.31167 2.25848 6.5255 2.89482 6.12341C3.27434 5.84916 3.37404 5.39402 2.97978 5.19373L2.89482 5.15759C2.24265 4.91049 2.2945 4.1094 2.87627 4.01013L3.00029 4.00037H12.0003ZM4.10967 5.00037C4.20504 5.21353 4.24167 5.43927 4.22881 5.65564C4.19483 6.22434 3.84539 6.6698 3.47978 6.93396L3.45439 6.95154L3.42803 6.96814C3.13146 7.15571 2.95549 7.54634 3.01201 7.89587L3.8167 12.2836L3.86064 12.4379C3.99174 12.7806 4.30985 13.0003 4.66045 13.0004H10.3372C10.6883 13.0004 11.0059 12.7804 11.137 12.4379L11.181 12.2836L11.9856 7.89392C12.0478 7.48503 11.896 7.12749 11.5989 6.93982L11.5872 6.93201C11.1947 6.67636 10.8329 6.22818 10.7981 5.6488C10.7841 5.41275 10.8276 5.19438 10.9124 5.00037H9.05693C9.02162 5.1465 9.00029 5.31234 9.00029 5.50037C9.00053 6.49579 9.95439 7.14921 9.95439 8.34998C9.95438 9.26981 9.49817 9.84216 8.62139 9.84216C8.13175 9.84194 7.57861 9.46089 7.57842 8.75818C7.57842 7.89659 8.19937 7.34551 8.19951 6.25037C8.19951 5.81791 8.08405 5.37659 7.90459 5.00037H4.10967Z" fill="currentColor"/>
        <path className="lid" d="M7.50029 0.0032959C8.19539 0.00339343 8.75076 0.281559 8.75029 0.750366C8.75012 0.997382 8.57547 1.12061 8.42314 1.22791C8.305 1.31112 8.19951 1.38507 8.19951 1.50037C8.20163 1.99975 12.5003 1.50061 12.5003 2.50037C12.5001 2.77622 12.2761 3.00017 12.0003 3.00037H3.00029C2.72427 3.00037 2.50049 2.77634 2.50029 2.50037C2.50029 1.50061 6.79797 1.99975 6.8001 1.50037C6.8001 1.38502 6.69466 1.31116 6.57646 1.22791C6.42414 1.12062 6.25047 0.99737 6.25029 0.750366C6.24983 0.281477 6.80502 0.0032959 7.50029 0.0032959Z" fill="currentColor"/>
      </svg>
    </>
  );
}