\n \t\n \t\n \n\n```\n\n## API\n\n### `class Icon`\nThe Icon class extends [Leaflet's Icon class](https://leafletjs.com/reference-2.0.0.html#icon).\n\n```ts\nimport { Marker } from \"leaflet\";\nimport { Icon, PinCirclePanel } from \"leaflet-extra-markers\";\n\nconst marker = new Marker([32.82,-117.43], {\n icon: new Icon({\n accentColor: \"firebrick\",\n color: \"indianred\",\n content: \"42\",\n contentColor: \"white\",\n size: 25,\n svg: PinCirclePanel,\n }),\n});\n```\n\n```ts\nclass Icon extends IconBase {\n constructor(options?: ExtraOptions);\n createIcon(): HTMLElement;\n createShadow(): HTMLElement;\n}\n```\n\n### `interface ExtraOptions`\nThese are the options you can pass into the `new Icon()` contructor. Note that this interface extends [Leaflet's IconOption](https://leafletjs.com/reference-2.0.0.html#icon-option), while these base options are supported as escape hatches, they should not be used in most circumstances.\n\n#### `svg: SvgNode | undefined`\nThe marker (`Marker.icon` in leaflet) svg node.\n\n*Default*: `\"#000\"`\n\n#### `accentColor: string | undefined`\nThe accent color is applied to the icon variant and also\nthe dot on the empty state.\n\n*Default*: `\"#fff\"`\n\n#### `color: string | undefined`\nThe marker color. Will be set on the `root.style.color property.\nThe SVG path for the base marker shape has a `fill` set to `currentColor` to inherit this color.\n\nNote: This setting could be overwritten by `rootStyle.color`.\nNote: If `svgFillImageSrc` is defined, this setting will still be set but effectively ignored.\n\n*Default*: `\"#000\"`.\n\n#### `content: Content | ((opts: ExtraOptions) => Content) | undefined`\nThe content node to append to the `contentWrapper`.\nThis will be ignored if `contentHtml is set.\n\n*Default*:\n```js\ncreateElement([\"div\", {\n style: {\n display: \"block\",\n height: \"0.8em\",\n width: \"0.8em\",\n backgroundColor: accentColor,\n borderRadius: \"100%\",\n },\n}]);\n```\n\n#### `contentHtml: string | undefined`\nDangerously sets innerHTML of the contentWrapper.\nIf set this will override the `content` property.\nWARNING: Possible XSS vector; sanitize user inputs if using this.\n\nExample: ``\n\n#### `contentColor: string | undefined`\nThe content (wrapper) color. Will be set on the `contentWrapper.style.color property.\n\nNote: This setting could be overwritten by `contentWrapperStyle.color`.\n\n*Default*: `\"#fff\"`\n\n#### `origin: \"bottom\" | \"center\" | undefined`\nSets the icon anchor.\n- `bottom` x center, y bottom\n- `center` x center, y center\n\n#### `scale: number | undefined`\nThe scale of the SVG marker; height will be scaled proportionately. The markers are designed on a base `30px` wide grid. Min: `0.1`\n\n*Default*: `1`\n\n#### `shadow: \"cast\" | \"drop\" | \"ellipse\" | \"none\" | undefined`\nThe shadow variant.\n\n*Default*: `\"cast\"`\n\n#### `svgFillImageSrc: string | undefined`\nThe url of an image to use as a fill for the marker. Image will be clipped by marker base shape. Consider retina devices when sizing images.\n\n#### `contentWrapperClass: string | undefined`\nThe CSS class names added to the `contentWrapper` element.\n\n#### `contentWrapperStyle: Partial | undefined`\nThe styles to set on `contentWrapper` element.\n\n*Default*: `{}`\n\n#### `rootClass: string | undefined`\nThe CSS class names added to the `root` element.\n\n#### `rootStyle: Partial | undefined`\nThe styles to set on `root` element.\n\n*Default*: `{}`\n\n#### `shadowClass: string | undefined`\nThe CSS class names added to the `shadow` element.\n\n#### `shadowStyle: Partial | undefined`\nThe styles to set on `shadow` element.\n\n*Default*: `{}`\n\n#### `svgClass: string | undefined`\nThe CSS class names added to the `svg` element.\n\n#### `svgStyle: Partial | undefined`\nThe styles to set on `svg` element.\n\n*Default*: `{}`\n\n### `function createElement(params: ElementParams): HTMLElement`\nCreates HTML element recursively from a data structure. Efficently uses document fragements and support style objects and class arrays -- skipping falsy values.\n\n```js\nconst svg = createElement([\n \"i\",\n {\n \"data-foo\": \"bar\"\n style: {\n filter: \"drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.32))\",\n },\n class: [\n \"fa\",\n isCafe && \"fa-coffee\",\n ],\n },\n [\n // Optionally pass in children with same structure.\n ]\n])\n```\n\n### `function createSvgElement(params: ElementParams): SVGElement`\nCreates SVG element recursively from a data structure. Efficently uses document fragements and support style objects and class arrays -- skipping falsy values.\n\n```js\nconst svg = createSvgElement([\n \"svg\",\n {\n width: \"30px\",\n height: \"30px\",\n style: {\n filter: \"drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.32))\",\n },\n class: [\n \"extra-marker-icon\",\n ],\n },\n [\"circle\", { cx: \"10\", cy: \"10\", r: \"5\", fill: \"currentColor\" }],\n])\n```\n\n## Design\n\nOriginal marker design file (Figma) is located at `./assets/markers.fig`.\n\n### SVG\n\nThe markers are divided into 4 **families**:\n- `pin` - taller map markers; like a pushpin; origin at bottom center\n- `tack` - short map markers; like a thumbtack; origin at bottom center\n- `chip` - shorter map markers; like a poker chip; origin at bottom center\n- `point` - simple point markers; origin at center center\n\nEach icon **family** has many **shapes**:\n- `circle`\n- `diamond`\n- `pentagon`\n- `square`\n- `star`\n- `teardrop` (only for `pin` family)\n- `triangle`\n\nEach **shape** has many optional **variants**:\n- `border-1` is a relative 1px border\n- `border-2` is a relative 2px border\n- `panel` is a relative 2px border th a solid fill on the marker tail/pointer.\n\nThe variants are designed to completely cover the base shape so you can have fun with [opacity](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity), [filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter), or [mix-blend-mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode).\n\nThe SVG Icons are designed on a base 30px wide grid. The height varies per icon family.\n\n### Shadows\n\nThe SVG shadows are inlined as data URIs to increase performance. It is possible to a custom shadow by passing in a `shadowUrl` options.\n\nThe following script was used to efficently encode the shadow SVGs into data URIs.\n\n```sh\nnpx mini-svg-data-uri ./assets/shadow-ellipse.svg\n```\n\n### HTML\n\nBelow is the HTML structure of the Marker Icon.\n```html\n
\n
\n\n \n \n
\n \n \n
\n \n ![]()
\n
\n```\n\n## Migration guide\n\n### v1 to v2\nVersion 2 is a complete rewrite to support svg only icons with no image or css file dependencies.\n1. Upgrade to Leaflet v2.\n2. Remove referenced Image and CSS files as v2 only has JS dependencies.\n3. Update `Icon` options/properties per the mapping below:\n - `extraClasses` --> `rootClass`.\n - `icon` --> `content` or `contentHtml`.\n - Consider using the `createElement` util here.\n - `iconColor` --> `contentColor`.\n - `iconRotate` - removed; instead add the appropriate class or style to the element passed into `content`.\n - `innerHtml` - removed.\n - `number` --> `content`.\n - `prefix` - removed. Instead add it to your HTML string for `contentHtml` or on the element if using `content`\n - `shape` - removed; instead import the desired marker. `import { PinCircleBorder } from \"leaflet-extra-markers\";`\n - `svg` --> not supported as boolean; now this takes an SvgNode type (import desired marker and pass by reference)\n - `svgBorderColor` - removed; this never worked but its intended effect can now be accomplished by setting `accentColor`.\n - `svgOpacity` - removed; this never worked but its intended effect can now be accomplished by setting `svgStyle.opacity`.\n - `markerColor` --> `color`; note that named colors have been removed. The legacy color mapping is below;\n ```js\n const colors: {\n \"red\": \"#a23337\",\n \"orange\": \"#ef9227\",\n \"orange-dark\": \"#d73e29\",\n \"yellow\": \"#f5bb39\",\n \"cyan\": \"#32a9dd\",\n \"blue\": \"#1b75bb\",\n \"blue-dark\": \"#276273\",\n \"purple\": \"#440444\",\n \"violet\": \"#90278d\",\n \"pink\": \"#c057a0\",\n \"green-light\": \"#70b044\",\n \"green\": \"#009549\",\n \"green-dark\": \"#006838\",\n \"white\": \"#ffffff\",\n \"black\": \"#231f20\",\n };\n ```\n","readmeFilename":"README.md"}