Was this helpful?
Custom Icons
Alpaca supports custom icons, which are then used in maps, lists, statistics and broader use cases.
- Designers can supply icons
- Icons should be simple silhouettes, be easily recognisable when scaled to
11pxor lower. - Icons are supplied as SVG icons and uploaded into content of the Itinerary Editor
Visit the Noun Project
for an excellent repository of over 5 million icons. Make sure your selection
of icon complies with recommended guidelines
SVG Files
SVG files are used in order to display icons.
- Use only a silhouette with one fill style
- Do not include any strokes, typography that isn't outlined, images or external urls
Supported tags and attributes
SVG's can be used to create complex shapes and extensive additional features. Alpaca will process and extract out a single set of paths to describe the shape silhouette.
| Elements | Examples |
|---|---|
| ✔️ Tags | rect, circle, ellipse, polygon, polyline, line, path, title |
| ✔️ Attributes | d, x, y, x1, x2, y1, y2, points, width, height, cx, cy, rx, ry, r |
| ❌ Bad Tags | svg, symbol, clipPath, mask, image, text |
| ❌ Clip Attributes | clip-path, clip-rule |
| ❌ Stroke Attributes | stroke-dasharray, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, stroke-opacity-blend stroke |
| ❌ External references | href |
| ❌ Other attributes | transform, overflow, visibility |
The website icomoon provides
a tool that can be used to clean up your icons for use in applications and
the alpaca platform.
Examples
✔️ Simple Path
The example contains a basic SVG shape that is easy to extract out the required paths.
1<svg
2 xmlns="http://www.w3.org/2000/svg"
3 height="24"
4 viewBox="0 0 24 24"
5 width="24"
6>
7 <path
8 d="M10 10.5h1.5v3H10zM19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM7.5 15H6v-4.5H4.5V9h3v6zm5.5-1c0 .55-.45 1-1 1H9.5c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1H12c.55 0 1 .45 1 1v4zm6.5 1h-1.75L16 12.75V15h-1.5V9H16v2.25L17.75 9h1.75l-2.25 3 2.25 3z"
9 />
10</svg>❌ Contains a Stroke
The icon has a stroke attribute.
1<svg
2 xmlns="http://www.w3.org/2000/svg"
3 height="24"
4 viewBox="0 0 24 24"
5 width="24"
6>
7 <path d="M0 0h24v24H0V0z" stroke="black" />
8 <path
9 d="M10 10.5h1.5v3H10zM19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM7.5 15H6v-4.5H4.5V9h3v6zm5.5-1c0 .55-.45 1-1 1H9.5c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1H12c.55 0 1 .45 1 1v4zm6.5 1h-1.75L16 12.75V15h-1.5V9H16v2.25L17.75 9h1.75l-2.25 3 2.25 3z"
10 />
11</svg>❌ Contains a url
Should not contain any url styles or any image elements
1<svg
2 xmlns="http://www.w3.org/2000/svg"
3 height="24"
4 viewBox="0 0 24 24"
5 width="24"
6>
7 <image href="example.png" />
8 <path d="M0 0h24v24H0V0z" fill="none" fill="url(somefile.svg)" />
9 <path
10 d="M10 10.5h1.5v3H10zM19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM7.5 15H6v-4.5H4.5V9h3v6zm5.5-1c0 .55-.45 1-1 1H9.5c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1H12c.55 0 1 .45 1 1v4zm6.5 1h-1.75L16 12.75V15h-1.5V9H16v2.25L17.75 9h1.75l-2.25 3 2.25 3z"
11 />
12</svg>alpaca.tech
Copyright © 2024 - Made with love ❤️ in Australia.