<!-- Start: @icon--archive -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#archive"></use>
</svg>
<!-- End: @icon--archive -->
<!-- Start: @icon--arrow-left -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#arrow-left"></use>
</svg>
<!-- End: @icon--arrow-left -->
<!-- Start: @icon--arrow-right -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#arrow-right"></use>
</svg>
<!-- End: @icon--arrow-right -->
<!-- Start: @icon--calendar -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#calendar"></use>
</svg>
<!-- End: @icon--calendar -->
<!-- Start: @icon--cart-filled -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#cart-filled"></use>
</svg>
<!-- End: @icon--cart-filled -->
<!-- Start: @icon--cart-icon -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#cart-icon"></use>
</svg>
<!-- End: @icon--cart-icon -->
<!-- Start: @icon--check-outline -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check-outline"></use>
</svg>
<!-- End: @icon--check-outline -->
<!-- Start: @icon--check -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#check"></use>
</svg>
<!-- End: @icon--check -->
<!-- Start: @icon--chevron-bottom -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-bottom"></use>
</svg>
<!-- End: @icon--chevron-bottom -->
<!-- Start: @icon--chevron-left -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-left"></use>
</svg>
<!-- End: @icon--chevron-left -->
<!-- Start: @icon--chevron-right -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-right"></use>
</svg>
<!-- End: @icon--chevron-right -->
<!-- Start: @icon--chevron-top -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#chevron-top"></use>
</svg>
<!-- End: @icon--chevron-top -->
<!-- Start: @icon--circle-check -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#circle-check"></use>
</svg>
<!-- End: @icon--circle-check -->
<!-- Start: @icon--close -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#close"></use>
</svg>
<!-- End: @icon--close -->
<!-- Start: @icon--csv -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#csv"></use>
</svg>
<!-- End: @icon--csv -->
<!-- Start: @icon--dashboard-balance -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#dashboard-balance"></use>
</svg>
<!-- End: @icon--dashboard-balance -->
<!-- Start: @icon--dashboard-calender -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#dashboard-calender"></use>
</svg>
<!-- End: @icon--dashboard-calender -->
<!-- Start: @icon--dashboard-document -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#dashboard-document"></use>
</svg>
<!-- End: @icon--dashboard-document -->
<!-- Start: @icon--dashboard-signing -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#dashboard-signing"></use>
</svg>
<!-- End: @icon--dashboard-signing -->
<!-- Start: @icon--dots -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#dots"></use>
</svg>
<!-- End: @icon--dots -->
<!-- Start: @icon--download -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#download"></use>
</svg>
<!-- End: @icon--download -->
<!-- Start: @icon--edit -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#edit"></use>
</svg>
<!-- End: @icon--edit -->
<!-- Start: @icon--email -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#email"></use>
</svg>
<!-- End: @icon--email -->
<!-- Start: @icon--error-outline -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#error-outline"></use>
</svg>
<!-- End: @icon--error-outline -->
<!-- Start: @icon--excel -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#excel"></use>
</svg>
<!-- End: @icon--excel -->
<!-- Start: @icon--house-1 -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#house-1"></use>
</svg>
<!-- End: @icon--house-1 -->
<!-- Start: @icon--house-2 -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#house-2"></use>
</svg>
<!-- End: @icon--house-2 -->
<!-- Start: @icon--house-3 -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#house-3"></use>
</svg>
<!-- End: @icon--house-3 -->
<!-- Start: @icon--house-4 -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#house-4"></use>
</svg>
<!-- End: @icon--house-4 -->
<!-- Start: @icon--house-5 -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#house-5"></use>
</svg>
<!-- End: @icon--house-5 -->
<!-- Start: @icon--map -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#map"></use>
</svg>
<!-- End: @icon--map -->
<!-- Start: @icon--menu -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#menu"></use>
</svg>
<!-- End: @icon--menu -->
<!-- Start: @icon--module-handle -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#module-handle"></use>
</svg>
<!-- End: @icon--module-handle -->
<!-- Start: @icon--phone -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#phone"></use>
</svg>
<!-- End: @icon--phone -->
<!-- Start: @icon--pin -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#pin"></use>
</svg>
<!-- End: @icon--pin -->
<!-- Start: @icon--plus -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#plus"></use>
</svg>
<!-- End: @icon--plus -->
<!-- Start: @icon--quote -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#quote"></use>
</svg>
<!-- End: @icon--quote -->
<!-- Start: @icon--rating-star -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#rating-star"></use>
</svg>
<!-- End: @icon--rating-star -->
<!-- Start: @icon--search -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#search"></use>
</svg>
<!-- End: @icon--search -->
<!-- Start: @icon--social-facebook -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#social-facebook"></use>
</svg>
<!-- End: @icon--social-facebook -->
<!-- Start: @icon--social-instagram -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#social-instagram"></use>
</svg>
<!-- End: @icon--social-instagram -->
<!-- Start: @icon--social-linkedin -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#social-linkedin"></use>
</svg>
<!-- End: @icon--social-linkedin -->
<!-- Start: @icon--social-twitter -->
<svg class="icon " focusable="false">
<use href="../../inc/svg/global.4609ec92109fc41e7ad4764ef897ea8e.svg#social-twitter"></use>
</svg>
<!-- End: @icon--social-twitter -->
<svg class="icon {{ modifier }} {{ class }}" focusable="false">
<use href="{{ ('/inc/' ~ _config.svgPath)|path }}#{{ name }}"></use>
</svg>
{
"Default": {
"language": "en-US"
},
"Archive": {
"language": "en-US",
"name": "archive"
},
"Arrow Left": {
"language": "en-US",
"name": "arrow-left"
},
"Arrow Right": {
"language": "en-US",
"name": "arrow-right"
},
"Calendar": {
"language": "en-US",
"name": "calendar"
},
"Cart Filled": {
"language": "en-US",
"name": "cart-filled"
},
"Cart Icon": {
"language": "en-US",
"name": "cart-icon"
},
"Check Outline": {
"language": "en-US",
"name": "check-outline"
},
"Check": {
"language": "en-US",
"name": "check"
},
"Chevron Bottom": {
"language": "en-US",
"name": "chevron-bottom"
},
"Chevron Left": {
"language": "en-US",
"name": "chevron-left"
},
"Chevron Right": {
"language": "en-US",
"name": "chevron-right"
},
"Chevron Top": {
"language": "en-US",
"name": "chevron-top"
},
"Circle Check": {
"language": "en-US",
"name": "circle-check"
},
"Close": {
"language": "en-US",
"name": "close"
},
"Csv": {
"language": "en-US",
"name": "csv"
},
"Dashboard Balance": {
"language": "en-US",
"name": "dashboard-balance"
},
"Dashboard Calender": {
"language": "en-US",
"name": "dashboard-calender"
},
"Dashboard Document": {
"language": "en-US",
"name": "dashboard-document"
},
"Dashboard Signing": {
"language": "en-US",
"name": "dashboard-signing"
},
"Dots": {
"language": "en-US",
"name": "dots"
},
"Download": {
"language": "en-US",
"name": "download"
},
"Edit": {
"language": "en-US",
"name": "edit"
},
"Email": {
"language": "en-US",
"name": "email"
},
"Error Outline": {
"language": "en-US",
"name": "error-outline"
},
"Excel": {
"language": "en-US",
"name": "excel"
},
"House 1": {
"language": "en-US",
"name": "house-1"
},
"House 2": {
"language": "en-US",
"name": "house-2"
},
"House 3": {
"language": "en-US",
"name": "house-3"
},
"House 4": {
"language": "en-US",
"name": "house-4"
},
"House 5": {
"language": "en-US",
"name": "house-5"
},
"Map": {
"language": "en-US",
"name": "map"
},
"Menu": {
"language": "en-US",
"name": "menu"
},
"Module Handle": {
"language": "en-US",
"name": "module-handle"
},
"Phone": {
"language": "en-US",
"name": "phone"
},
"Pin": {
"language": "en-US",
"name": "pin"
},
"Plus": {
"language": "en-US",
"name": "plus"
},
"Quote": {
"language": "en-US",
"name": "quote"
},
"Rating Star": {
"language": "en-US",
"name": "rating-star"
},
"Search": {
"language": "en-US",
"name": "search"
},
"Social Facebook": {
"language": "en-US",
"name": "social-facebook"
},
"Social Instagram": {
"language": "en-US",
"name": "social-instagram"
},
"Social Linkedin": {
"language": "en-US",
"name": "social-linkedin"
},
"Social Twitter": {
"language": "en-US",
"name": "social-twitter"
}
}
.icon {
width: 1em;
height: 1em;
fill: currentColor;
}
import './icon.scss';
interface IIconMap {
[filename: string]: __WebpackModuleApi.RequireContext;
}
const req: __WebpackModuleApi.RequireContext = require.context('./import/svg/', false, /^\.\/.*\.svg$/);
(req.keys()).reduce((glyphs: IIconMap, key: string): IIconMap => {
const filename: string = key.match(new RegExp(/[^/]+(?=\.svg$)/))[0];
return {
...glyphs,
[filename]: req(key),
};
}, {});
export default class Icon {
static render(name: string, modifier?: string, className?: string): string {
const use: string = '<use href="' + window.gotoAndPlay.svgPath + '#' + name + '"></use>';
const classArray: string[] = ['icon'];
if (modifier) {
classArray.push(modifier);
}
if (className) {
classArray.push(className);
}
return '<svg class="' + classArray.join(' ') + '">' + use + '</svg>';
}
}