Calcite point symbols
A collection of SVG illustrations for use in mapping and wayfinding.
Installation
npm install arcgis/calcite-point-symbols --save
JavaScript Exports
Icons are made available as named ES6 exports. This way you can import just the icons you need into your app:
The icon names will be lower camel case. If the icon name starts with a number, prefix the name with i
. This is due to the fact that JavaScript variables cannot begin with a number.
If your build system does not perform tree shaking and dead code removal, there is a chance that importing the icons using this syntax will make your bundle extremely large. If that is the case, you can also import icons directly:
Some icons use multiple paths and opacity in their construction, for these the data structure will be an array of path data as follows:
Note: It is not recommended to import the entire library of icons. This will have negative performance implications. Use the technique above to select only the icons your users actually need to download.
TypeScript
Types are also available for projects leveraging TypeScript. CalciteIconPath
describes all exported icons (both single and multi-path) while CalciteMultiPathEntry
describes an individual path from a multi-path icon.
JSON Format
All icons are also provided as part of a JSON file. If you installed via npm, you can import the full icon data set using the following:
This will give you an object containing all the icons in the library at all sizes:
Note: path data omitted for brevity.
Most icons will have simple strings as path data, but some will be more complex as they need to store not only path, but opacity as well for multiple shapes. Icons of this structure will be annotated with the multiPath
flag.
Individual Icons Structure
All the individual SVG icons have a common file structure.
This is what the shoplifting-21.svg
looks like:
None of the icons have stroke
attributes. The fill
attribute can be defined with css:
All the other styling properties applicable to the whole svg element are applicable.