tldraw/dist-esm/lib/ui/components/primitives/TldrawUiIcon.mjs.map

A tiny little drawing editor.

{
  "version": 3,
  "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiIcon.tsx"],
  "sourcesContent": ["import classNames from 'classnames'\nimport { memo, useLayoutEffect, useRef } from 'react'\nimport { useAssetUrls } from '../../context/asset-urls'\nimport { TLUiIconType } from '../../icon-types'\n\n/** @public */\nexport interface TLUiIconProps extends React.HTMLProps<HTMLDivElement> {\n\ticon: TLUiIconType | Exclude<string, TLUiIconType>\n\tsmall?: boolean\n\tcolor?: string\n\tchildren?: undefined\n\tinvertIcon?: boolean\n\tcrossOrigin?: 'anonymous' | 'use-credentials'\n}\n\n/** @public @react */\nexport const TldrawUiIcon = memo(function TldrawUiIcon({\n\tsmall,\n\tinvertIcon,\n\ticon,\n\tcolor,\n\tclassName,\n\t...props\n}: TLUiIconProps) {\n\tconst assetUrls = useAssetUrls()\n\tconst asset = assetUrls.icons[icon as TLUiIconType] ?? assetUrls.icons['question-mark-circle']\n\tconst ref = useRef<HTMLDivElement>(null)\n\n\tuseLayoutEffect(() => {\n\t\tif (!asset) {\n\t\t\tconsole.error(`Icon not found: ${icon}. Add it to the assetUrls.icons object.`)\n\t\t}\n\n\t\tif (ref?.current) {\n\t\t\t// HACK: Fix for <https://linear.app/tldraw/issue/TLD-1700/dragging-around-with-the-handtool-makes-lots-of-requests-for-icons>\n\t\t\t// It seems that passing `WebkitMask` to react will cause a render on each call, no idea why... but this appears to be the fix.\n\t\t\t// @ts-ignore\n\t\t\t// eslint-disable-next-line @typescript-eslint/no-deprecated\n\t\t\tref.current.style.webkitMask = `url(${asset}) center 100% / 100% no-repeat`\n\t\t}\n\t}, [ref, asset, icon])\n\n\tif (icon === 'none') {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={classNames(\n\t\t\t\t\t'tlui-icon tlui-icon__placeholder',\n\t\t\t\t\t{ 'tlui-icon__small': small },\n\t\t\t\t\tclassName\n\t\t\t\t)}\n\t\t\t/>\n\t\t)\n\t}\n\n\treturn (\n\t\t<div\n\t\t\t{...props}\n\t\t\tref={ref}\n\t\t\tclassName={classNames('tlui-icon', { 'tlui-icon__small': small }, className)}\n\t\t\tstyle={{\n\t\t\t\tcolor,\n\t\t\t\tmask: `url(${asset}) center 100% / 100% no-repeat`,\n\t\t\t\ttransform: invertIcon ? 'scale(-1, 1)' : undefined,\n\t\t\t}}\n\t\t/>\n\t)\n})\n"],
  "mappings": "AA4CG;AA5CH,OAAO,gBAAgB;AACvB,SAAS,MAAM,iBAAiB,cAAc;AAC9C,SAAS,oBAAoB;AActB,MAAM,eAAe,KAAK,SAASA,cAAa;AAAA,EACtD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAkB;AACjB,QAAM,YAAY,aAAa;AAC/B,QAAM,QAAQ,UAAU,MAAM,IAAoB,KAAK,UAAU,MAAM,sBAAsB;AAC7F,QAAM,MAAM,OAAuB,IAAI;AAEvC,kBAAgB,MAAM;AACrB,QAAI,CAAC,OAAO;AACX,cAAQ,MAAM,mBAAmB,IAAI,yCAAyC;AAAA,IAC/E;AAEA,QAAI,KAAK,SAAS;AAKjB,UAAI,QAAQ,MAAM,aAAa,OAAO,KAAK;AAAA,IAC5C;AAAA,EACD,GAAG,CAAC,KAAK,OAAO,IAAI,CAAC;AAErB,MAAI,SAAS,QAAQ;AACpB,WACC;AAAA,MAAC;AAAA;AAAA,QACA,WAAW;AAAA,UACV;AAAA,UACA,EAAE,oBAAoB,MAAM;AAAA,UAC5B;AAAA,QACD;AAAA;AAAA,IACD;AAAA,EAEF;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACC,GAAG;AAAA,MACJ;AAAA,MACA,WAAW,WAAW,aAAa,EAAE,oBAAoB,MAAM,GAAG,SAAS;AAAA,MAC3E,OAAO;AAAA,QACN;AAAA,QACA,MAAM,OAAO,KAAK;AAAA,QAClB,WAAW,aAAa,iBAAiB;AAAA,MAC1C;AAAA;AAAA,EACD;AAEF,CAAC;",
  "names": ["TldrawUiIcon"]
}