# calcite-ui-icons
A collection of UI SVG icons created by Esri for mapping applications.
## Installation
`npm install @esri/calcite-ui-icons --save`
## Description
Icons use an outlined style. Some icons include an additional filled version.
Every concept has 3 sizes:
- **16x16**
- **24x24**
- **32x32**
### Why 3 Sizes?
See the [What Happens When You Scale Vector-Based Icons wiki entry](https://github.com/Esri/calcite-design-system/wiki/What-Happens-When-You-Scale-Vector-Based-Icons) for more info on scaling behavior.
### Outline icons are the standard
Outline icons have the default name. For example, `trash-16.svg` will render the default outline icon.
Some icons have alternative states for toggling or greater flexibility. For those icons, appending `-f` (`information-16-f.svg`) will render the filled version.
### Web Component
For web apps, the easiest way to use calcite-ui-icons is with [calcite-components](https://github.com/Esri/calcite-components). The [calcite-icon](https://github.com/Esri/calcite-components/tree/master/src/components/calcite-icon) component will handle fetching and rendering any icon from this set with the following api:
```html
```
### Sprite packages
Furthermore, sprites are available in 3 packages and live outside the `icons/` directory:
- sprite-16.svg
- sprite-24.svg
- sprite-32.svg
Alternative filled versions of the outlined icons have `-f` appended to their name, and are included in the sprites above.
Icons in the sprite have an `id` of the individual SVG file name.
## JavaScript Exports
The icons are also made available as named ES6 exports. This way you can import just the icons you need into your app:
```js
import { arrowLeft16 } from "@esri/calcite-ui-icons";
console.log(arrowLeft16); // => "M16 6v3H5.035l5 5H6.5L0 7.5 6.5 1h3.536l-5 5z"
```
The icon names will be lower camel case. If the icon name starts with a number (ex. 2d-explore, 3d-glasses) prefix the name with `i`. This is due to the fact that JavaScript variables cannot begin with a number. If the icon is a filled alternate, it will have `F` at the end of the variable name.
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:
```js
import { lock16F } from "@esri/calcite-ui-icons/js/lock16F.js";
```
Some icons use multiple paths and opacity in their construction, for these the data structure will be as follows:
```js
import { imageLayer16 } from "@esri/calcite-ui-icons/js/imageLayer16.js";
console.log(imageLayer16); // => [{ path: "M16 6v3H5.035l5 5H6.5L0 7.5 6.5 1h3.536l-5 5z", opacity: .4 }, ...]
```
**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 multipath) while `CalciteMultiPathEntry` describes an individual path from a multipath 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:
```js
var calciteIcons = require("@esri/calcite-ui-icons/docs/icons.json");
```
This will give you an object containing all the icons in the library at all sizes:
```js
{
version: '{current version number}',
icons: {
blog: {
alias: ['social'],
category: 'Social-Media',
16:['M15.541...'],
24:['M23.756...'],
32:['M31.618...']
},
"image-layer": {
alias:[ "raster", ...],
category:"GIS",
multiPath: true,
16:[{ path: "M16...", opacity: .4 }, ...],
24:[{ path: "M127...", opacity: .4 }, ...],
32:[{ path: "M112...", opacity: .4 }, ...]
},
...
}
}
```
_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 `close-16.svg` looks like:
```html
```
None of the icons have `stroke` attributes. The `fill` attribute can be defined with css:
```css
svg {
fill: gray;
}
```
All the other styling properties applicable to the whole svg element are applicable.
```css
svg:hover {
fill: blue;
}
```
## Icon Font Usage
In addition to SVG icons, an icon font is available for streamlined integration.
To install the font, run:
`npm install @esri/calcite-ui-icons --save`
### Recommended Icon Sizes & Font Selection for Optimal Clarity
We provide three fonts, each designed for a standard size, for pixel perfection use at their designed sizes; 16px, 24px, and 32px.
- **16px font** → Use for 16px and smaller sizes.
- **24px font** → Use for 24px and mid-range sizes.
- **32px font** → Use for 32px and larger sizes.
**Avoid odd or non-standard sizes** like 13px, 17px, or 23px, as these break pixel alignment and can appear fuzzy.
## Contributing
Please read [CONTRIBUTING.md](./CONTRIBUTING.md)
## License
COPYRIGHT Esri -
All rights reserved under the copyright laws of the United States and applicable international laws, treaties, and conventions.
This material is licensed for use under the Esri Master License Agreement (MLA), and is bound by the terms of that agreement. You may redistribute and use this code without modification, provided you adhere to the terms of the MLA and include this copyright notice.
See use restrictions at
For additional information, refer to [Calcite's licensing](https://developers.arcgis.com/calcite-design-system/resources/licensing) and contact: Environmental Systems Research Institute, Inc. Attn: Contracts and Legal Services Department 380 New York Street Redlands, California, USA 92373 USA
email:
## Third-party notices
See [THIRD-PARTY-NOTICES.md](./THIRD-PARTY-NOTICES.md).