<!-- Start: @icon--arrow-right-54 -->
<svg class="icon ">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-54"></use>
</svg>
<!-- End: @icon--arrow-right-54 -->
<!-- Start: @icon--arrow-right-long-54 -->
<svg class="icon ">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-right-long-54"></use>
</svg>
<!-- End: @icon--arrow-right-long-54 -->
<!-- Start: @icon--arrow-top-right-54 -->
<svg class="icon ">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-top-right-54"></use>
</svg>
<!-- End: @icon--arrow-top-right-54 -->
<!-- Start: @icon--arrow-top-right-long-54 -->
<svg class="icon ">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#arrow-top-right-long-54"></use>
</svg>
<!-- End: @icon--arrow-top-right-long-54 -->
<!-- Start: @icon--check-22 -->
<svg class="icon ">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#check-22"></use>
</svg>
<!-- End: @icon--check-22 -->
<!-- Start: @icon--check-24 -->
<svg class="icon ">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#check-24"></use>
</svg>
<!-- End: @icon--check-24 -->
<!-- Start: @icon--check-outline -->
<svg class="icon ">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#check-outline"></use>
</svg>
<!-- End: @icon--check-outline -->
<!-- Start: @icon--chevron-bottom-24 -->
<svg class="icon ">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#chevron-bottom-24"></use>
</svg>
<!-- End: @icon--chevron-bottom-24 -->
<!-- Start: @icon--chevron-left-24 -->
<svg class="icon ">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#chevron-left-24"></use>
</svg>
<!-- End: @icon--chevron-left-24 -->
<!-- Start: @icon--chevron-right-24 -->
<svg class="icon ">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#chevron-right-24"></use>
</svg>
<!-- End: @icon--chevron-right-24 -->
<!-- Start: @icon--chevron-top-24 -->
<svg class="icon ">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#chevron-top-24"></use>
</svg>
<!-- End: @icon--chevron-top-24 -->
<!-- Start: @icon--close-24 -->
<svg class="icon ">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#close-24"></use>
</svg>
<!-- End: @icon--close-24 -->
<!-- Start: @icon--close-54 -->
<svg class="icon ">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#close-54"></use>
</svg>
<!-- End: @icon--close-54 -->
<!-- Start: @icon--enter-24 -->
<svg class="icon ">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#enter-24"></use>
</svg>
<!-- End: @icon--enter-24 -->
<!-- Start: @icon--error-outline -->
<svg class="icon ">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#error-outline"></use>
</svg>
<!-- End: @icon--error-outline -->
<!-- Start: @icon--play-icon -->
<svg class="icon ">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#play-icon"></use>
</svg>
<!-- End: @icon--play-icon -->
<!-- Start: @icon--plus-24 -->
<svg class="icon ">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#plus-24"></use>
</svg>
<!-- End: @icon--plus-24 -->
<!-- Start: @icon--plus-36 -->
<svg class="icon ">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#plus-36"></use>
</svg>
<!-- End: @icon--plus-36 -->
<!-- Start: @icon--quote-24 -->
<svg class="icon ">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#quote-24"></use>
</svg>
<!-- End: @icon--quote-24 -->
<!-- Start: @icon--scroll-24 -->
<svg class="icon ">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#scroll-24"></use>
</svg>
<!-- End: @icon--scroll-24 -->
<!-- Start: @icon--search-24 -->
<svg class="icon ">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#search-24"></use>
</svg>
<!-- End: @icon--search-24 -->
<!-- Start: @icon--tiny-arrow-right-24 -->
<svg class="icon ">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-24"></use>
</svg>
<!-- End: @icon--tiny-arrow-right-24 -->
<!-- Start: @icon--tiny-arrow-right-long-24 -->
<svg class="icon ">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-arrow-right-long-24"></use>
</svg>
<!-- End: @icon--tiny-arrow-right-long-24 -->
<!-- Start: @icon--tiny-right-top-24 -->
<svg class="icon ">
<use xlink:href="../../inc/svg/global.bc9cdd731ad718497c5d8f03d08908d4.svg#tiny-right-top-24"></use>
</svg>
<!-- End: @icon--tiny-right-top-24 -->
<svg class="icon {{ modifier }} {{ class }}">
<use xlink:href="{{ ('/inc/' ~ _config.svgPath)|path }}#{{ name }}"></use>
</svg>
{
"Default": {
"language": "en-US"
},
"Arrow Right 54": {
"language": "en-US",
"name": "arrow-right-54"
},
"Arrow Right Long 54": {
"language": "en-US",
"name": "arrow-right-long-54"
},
"Arrow Top Right 54": {
"language": "en-US",
"name": "arrow-top-right-54"
},
"Arrow Top Right Long 54": {
"language": "en-US",
"name": "arrow-top-right-long-54"
},
"Check 22": {
"language": "en-US",
"name": "check-22"
},
"Check 24": {
"language": "en-US",
"name": "check-24"
},
"Check Outline": {
"language": "en-US",
"name": "check-outline"
},
"Chevron Bottom 24": {
"language": "en-US",
"name": "chevron-bottom-24"
},
"Chevron Left 24": {
"language": "en-US",
"name": "chevron-left-24"
},
"Chevron Right 24": {
"language": "en-US",
"name": "chevron-right-24"
},
"Chevron Top 24": {
"language": "en-US",
"name": "chevron-top-24"
},
"Close 24": {
"language": "en-US",
"name": "close-24"
},
"Close 54": {
"language": "en-US",
"name": "close-54"
},
"Enter 24": {
"language": "en-US",
"name": "enter-24"
},
"Error Outline": {
"language": "en-US",
"name": "error-outline"
},
"Play Icon": {
"language": "en-US",
"name": "play-icon"
},
"Plus 24": {
"language": "en-US",
"name": "plus-24"
},
"Plus 36": {
"language": "en-US",
"name": "plus-36"
},
"Quote 24": {
"language": "en-US",
"name": "quote-24"
},
"Scroll 24": {
"language": "en-US",
"name": "scroll-24"
},
"Search 24": {
"language": "en-US",
"name": "search-24"
},
"Tiny Arrow Right 24": {
"language": "en-US",
"name": "tiny-arrow-right-24"
},
"Tiny Arrow Right Long 24": {
"language": "en-US",
"name": "tiny-arrow-right-long-24"
},
"Tiny Right Top 24": {
"language": "en-US",
"name": "tiny-right-top-24"
}
}
.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 xlink: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>';
}
}