mirror of
https://gitlab.com/allianceauth/allianceauth.git
synced 2026-02-04 06:06:19 +01:00
62 lines
1.4 KiB
Markdown
62 lines
1.4 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
|
|
- `aa-mumble-logo`: The Mumble logo
|
|
|
|
### 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>
|
|
```
|
|
|
|
### Mumble Logo
|
|
|
|
The Mumble logo can be used with the following code:
|
|
|
|
```html
|
|
<svg>
|
|
<use href="#aa-mumble-logo"></use>
|
|
</svg>
|
|
```
|