mirror of
https://gitlab.com/allianceauth/allianceauth.git
synced 2025-12-06 21:01:42 +01:00
d0a769f524
Could be used in at least 2 community apps. - Mumble Temp Links (https://github.com/Solar-Helix-Independent-Transport/allianceauth-mumble-temp) - AA Mumble Quick Connect (https://github.com/ppfeufer/aa-mumble-quick-connect)
61 lines
1.3 KiB
Markdown
61 lines
1.3 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>
|
|
```
|
|
|
|
### Mumble Logo
|
|
|
|
The Mumble logo can be used with the following code:
|
|
|
|
```html
|
|
<svg>
|
|
<use href="#aa-mumble-logo"></use>
|
|
</svg>
|
|
```
|