Pencil 1

Install

npm install @svg-animated-icons/react

CLI

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 pencil-1 --react

Code

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

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

.ai-pencil-1-icon * {
  transform-box: fill-box;
}

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

.ai-pencil-1-icon .pencil {
  transform-box: view-box;
  transform-origin: 12.5px 2.5px;
}

.ai-pencil-1-icon:not(.no-hover):hover .pencil {
  animation: ai-pencil-1-write 700ms ease-in-out;
}

@keyframes ai-pencil-1-write {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-0.8px, 0.8px); }
  75% { transform: translate(0.8px, -0.8px); }
}
`}</style>
      <svg
        xmlns="http://www.w3.org/2000/svg"
        className={classes}
        viewBox="0 0 15 15"
        fill="none"
      >
        <path className="pencil" d="M11.2246 1.08204C11.4187 0.953875 11.6826 0.975633 11.8535 1.14649L13.8535 3.14649L13.9179 3.22462C14.0461 3.41869 14.0244 3.68266 13.8535 3.85352L6.42186 11.2852C6.35442 11.3526 6.27771 11.4105 6.19432 11.4561L6.10838 11.4971L2.69725 12.96C2.50933 13.0405 2.29103 12.9981 2.14647 12.8535C2.0019 12.709 1.95949 12.4907 2.04002 12.3027L3.50291 8.89161L3.54393 8.80567C3.58951 8.72228 3.6474 8.64556 3.71483 8.57813L11.1465 1.14649L11.2246 1.08204ZM4.42186 9.28516L3.78025 10.7803L4.21775 11.2178L5.71483 10.5781L12.7929 3.50001L11.5 2.20704L4.42186 9.28516Z" fill="currentColor"/>
      </svg>
    </>
  );
}