mirror of
https://gitlab.com/allianceauth/allianceauth.git
synced 2025-08-24 19:01:42 +02:00
51 lines
1.2 KiB
Markdown
51 lines
1.2 KiB
Markdown
# 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:
|
|
|
|
```html
|
|
<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:
|
|
|
|
```html
|
|
<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:
|
|
|
|
```html
|
|
<svg>
|
|
<use href="#aa-logo"></use>
|
|
</svg>
|
|
```
|
|
|
|
### Loading Spinner
|
|
|
|
The loading spinner can be used with the following code:
|
|
|
|
```html
|
|
<svg>
|
|
<use href="#aa-loading-spinner"></use>
|
|
</svg>
|
|
```
|