
        
        
        <!-- Start: @icon--accordion-collapse -->
<svg class="icon  ">
    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#accordion-collapse"></use>
</svg>
<!-- End: @icon--accordion-collapse -->

<!-- Start: @icon--accordion-open -->
<svg class="icon  ">
    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#accordion-open"></use>
</svg>
<!-- End: @icon--accordion-open -->

<!-- Start: @icon--arrow-down-left -->
<svg class="icon  ">
    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-down-left"></use>
</svg>
<!-- End: @icon--arrow-down-left -->

<!-- Start: @icon--arrow-down -->
<svg class="icon  ">
    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-down"></use>
</svg>
<!-- End: @icon--arrow-down -->

<!-- Start: @icon--arrow-enter-bold -->
<svg class="icon  ">
    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-enter-bold"></use>
</svg>
<!-- End: @icon--arrow-enter-bold -->

<!-- Start: @icon--arrow-enter-small -->
<svg class="icon  ">
    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-enter-small"></use>
</svg>
<!-- End: @icon--arrow-enter-small -->

<!-- Start: @icon--arrow-enter -->
<svg class="icon  ">
    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-enter"></use>
</svg>
<!-- End: @icon--arrow-enter -->

<!-- Start: @icon--arrow-left -->
<svg class="icon  ">
    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-left"></use>
</svg>
<!-- End: @icon--arrow-left -->

<!-- Start: @icon--arrow-local -->
<svg class="icon  ">
    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-local"></use>
</svg>
<!-- End: @icon--arrow-local -->

<!-- Start: @icon--arrow-mobile-down-left -->
<svg class="icon  ">
    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-mobile-down-left"></use>
</svg>
<!-- End: @icon--arrow-mobile-down-left -->

<!-- Start: @icon--arrow-mobile-down -->
<svg class="icon  ">
    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-mobile-down"></use>
</svg>
<!-- End: @icon--arrow-mobile-down -->

<!-- Start: @icon--arrow-mobile-right -->
<svg class="icon  ">
    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-mobile-right"></use>
</svg>
<!-- End: @icon--arrow-mobile-right -->

<!-- Start: @icon--arrow-mobile-up -->
<svg class="icon  ">
    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-mobile-up"></use>
</svg>
<!-- End: @icon--arrow-mobile-up -->

<!-- Start: @icon--arrow-right -->
<svg class="icon  ">
    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-right"></use>
</svg>
<!-- End: @icon--arrow-right -->

<!-- Start: @icon--arrow-up-left -->
<svg class="icon  ">
    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-up-left"></use>
</svg>
<!-- End: @icon--arrow-up-left -->

<!-- Start: @icon--arrow-up -->
<svg class="icon  ">
    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#arrow-up"></use>
</svg>
<!-- End: @icon--arrow-up -->

<!-- Start: @icon--check -->
<svg class="icon  ">
    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#check"></use>
</svg>
<!-- End: @icon--check -->

<!-- Start: @icon--checkbox-crossed-big -->
<svg class="icon  ">
    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#checkbox-crossed-big"></use>
</svg>
<!-- End: @icon--checkbox-crossed-big -->

<!-- Start: @icon--checkbox-outline -->
<svg class="icon  ">
    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#checkbox-outline"></use>
</svg>
<!-- End: @icon--checkbox-outline -->

<!-- Start: @icon--checkbox-win -->
<svg class="icon  ">
    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#checkbox-win"></use>
</svg>
<!-- End: @icon--checkbox-win -->

<!-- Start: @icon--chevron-bottom -->
<svg class="icon  ">
    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#chevron-bottom"></use>
</svg>
<!-- End: @icon--chevron-bottom -->

<!-- Start: @icon--chevron-top -->
<svg class="icon  ">
    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#chevron-top"></use>
</svg>
<!-- End: @icon--chevron-top -->

<!-- Start: @icon--dot-big -->
<svg class="icon  ">
    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#dot-big"></use>
</svg>
<!-- End: @icon--dot-big -->

<!-- Start: @icon--download-light -->
<svg class="icon  ">
    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#download-light"></use>
</svg>
<!-- End: @icon--download-light -->

<!-- Start: @icon--download -->
<svg class="icon  ">
    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#download"></use>
</svg>
<!-- End: @icon--download -->

<!-- Start: @icon--exit-light -->
<svg class="icon  ">
    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#exit-light"></use>
</svg>
<!-- End: @icon--exit-light -->

<!-- Start: @icon--exit -->
<svg class="icon  ">
    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#exit"></use>
</svg>
<!-- End: @icon--exit -->

<!-- Start: @icon--menu -->
<svg class="icon  ">
    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#menu"></use>
</svg>
<!-- End: @icon--menu -->

<!-- Start: @icon--nope-logo -->
<svg class="icon  ">
    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#nope-logo"></use>
</svg>
<!-- End: @icon--nope-logo -->

<!-- Start: @icon--outline-small -->
<svg class="icon  ">
    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#outline-small"></use>
</svg>
<!-- End: @icon--outline-small -->

<!-- Start: @icon--search -->
<svg class="icon  ">
    <use xlink:href="../../inc/svg/global.49d3f64de1a3f5ccf16c763316702027.svg#search"></use>
</svg>
<!-- End: @icon--search -->


        <svg class="icon {{ modifier }} {{ class }}">
    <use xlink:href="{{ ('/inc/' ~ _config.svgPath)|path }}#{{ name }}"></use>
</svg>


        {
  "Default": {
    "language": "en-US"
  },
  "Accordion Collapse": {
    "language": "en-US",
    "name": "accordion-collapse"
  },
  "Accordion Open": {
    "language": "en-US",
    "name": "accordion-open"
  },
  "Arrow Down Left": {
    "language": "en-US",
    "name": "arrow-down-left"
  },
  "Arrow Down": {
    "language": "en-US",
    "name": "arrow-down"
  },
  "Arrow Enter Bold": {
    "language": "en-US",
    "name": "arrow-enter-bold"
  },
  "Arrow Enter Small": {
    "language": "en-US",
    "name": "arrow-enter-small"
  },
  "Arrow Enter": {
    "language": "en-US",
    "name": "arrow-enter"
  },
  "Arrow Left": {
    "language": "en-US",
    "name": "arrow-left"
  },
  "Arrow Local": {
    "language": "en-US",
    "name": "arrow-local"
  },
  "Arrow Mobile Down Left": {
    "language": "en-US",
    "name": "arrow-mobile-down-left"
  },
  "Arrow Mobile Down": {
    "language": "en-US",
    "name": "arrow-mobile-down"
  },
  "Arrow Mobile Right": {
    "language": "en-US",
    "name": "arrow-mobile-right"
  },
  "Arrow Mobile Up": {
    "language": "en-US",
    "name": "arrow-mobile-up"
  },
  "Arrow Right": {
    "language": "en-US",
    "name": "arrow-right"
  },
  "Arrow Up Left": {
    "language": "en-US",
    "name": "arrow-up-left"
  },
  "Arrow Up": {
    "language": "en-US",
    "name": "arrow-up"
  },
  "Check": {
    "language": "en-US",
    "name": "check"
  },
  "Checkbox Crossed Big": {
    "language": "en-US",
    "name": "checkbox-crossed-big"
  },
  "Checkbox Outline": {
    "language": "en-US",
    "name": "checkbox-outline"
  },
  "Checkbox Win": {
    "language": "en-US",
    "name": "checkbox-win"
  },
  "Chevron Bottom": {
    "language": "en-US",
    "name": "chevron-bottom"
  },
  "Chevron Top": {
    "language": "en-US",
    "name": "chevron-top"
  },
  "Dot Big": {
    "language": "en-US",
    "name": "dot-big"
  },
  "Download Light": {
    "language": "en-US",
    "name": "download-light"
  },
  "Download": {
    "language": "en-US",
    "name": "download"
  },
  "Exit Light": {
    "language": "en-US",
    "name": "exit-light"
  },
  "Exit": {
    "language": "en-US",
    "name": "exit"
  },
  "Menu": {
    "language": "en-US",
    "name": "menu"
  },
  "Nope Logo": {
    "language": "en-US",
    "name": "nope-logo"
  },
  "Outline Small": {
    "language": "en-US",
    "name": "outline-small"
  },
  "Search": {
    "language": "en-US",
    "name": "search"
  }
}

File:

Content:


                                .icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

URL: /components/raw/icon/icon.scss
Filesystem Path: src/patterns/components/icon/icon.scss
Size: 67 Bytes

Content:


                                import 'svgxuse';

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>';
    }
}

URL: /components/raw/icon/icon.ts
Filesystem Path: src/patterns/components/icon/icon.ts
Size: 948 Bytes

Handle: @icon
Filesystem Path: src/patterns/components/icon/icon.twig
Referenced by (18): @accordion, @button, @button--bordered-button, @button--text-button, @button--text-button-large, @button--text-button-appear, @button--button-white, @button--button-icon, @button--anchor-button, @button--bordered-button-disabled, @check, @check--disabled, @check--checked, @check--checked-disabled, @select, @select--invalid, @select--disabled, @contact

Icon

Forms

Notifications

Copy environment

Icon