allianceauth/docs/development/custom/framework/svg-sprite.md

SVG Sprite

An SVG sprite is a collection of SVG images combined into a single SVG file. This allows for efficient loading and management of icons in web applications.

The Alliance Auth framework provides a built-in SVG sprite that contains a selection of icons used in Alliance Auth. This sprite is automatically included in the base template, so you don't need to do anything special to use it.

Using the SVG Sprite

To use an icon from the SVG sprite, you can use the following HTML syntax:

<svg>
    <use href="#[icon-name]"></use>
</svg>

Replace [icon-name] with the name of the icon you want to use. For example, to use the Alliance Auth logo, you would write:

<svg>
    <use href="#aa-logo"></use>
</svg>

Available Icons

The following icons are available in the Alliance Auth SVG sprite:

• aa-logo: The Alliance Auth logo
• aa-loading-spinner: A loading spinner icon

Alliance Auth Logo

The Alliance Auth logo can be used with the following code:

<svg>
    <use href="#aa-logo"></use>
</svg>

Loading Spinner

The loading spinner can be used with the following code:

<svg>
    <use href="#aa-loading-spinner"></use>
</svg>