mirror of
https://gitlab.com/allianceauth/allianceauth.git
synced 2025-08-23 18:31:43 +02:00
Merge branch 'svg-sprite' into 'master'
[ADD] SVG sprite to the Alliance Auth framework See merge request allianceauth/allianceauth!1750
This commit is contained in:
Ariel Rin
commit
c1abc56ebc
23
allianceauth/framework/templates/framework/svg/sprite.svg
Normal file
23
allianceauth/framework/templates/framework/svg/sprite.svg
Normal file
@ -0,0 +1,23 @@
|
||||
<svg id="alliance-auth-svg-sprite" width="0" height="0" display="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<!-- Alliance Auth Logo -->
|
||||
<symbol id="aa-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
|
||||
<g transform="translate(41.953499,36.607802)">
|
||||
<path style="display:inline;fill:#e14852;stroke-width:0.32" d="M 131.07236,159.67687 C 109.26615,147.02458 91.302022,136.55002 91.152067,136.40007 l -0.272649,-0.27265 23.786292,-13.82371 c 13.08247,-7.60304 23.9186,-13.82025 24.08029,-13.81602 l 0.294,0.008 15.93273,36.83413 c 8.763,20.25877 15.891,36.95054 15.84,37.09283 l -0.0927,0.25869 z" />
|
||||
<path style="display:inline;fill:#436195;stroke-width:0.32" d="m 1.28,182.46369 c 0,-0.16969 17.354495,-40.46543 38.565546,-89.546103 L 78.411088,3.68 C 79.919052,1.4903841 82.294641,0.02199886 86.08,0.01224344 89.865359,0.00248802 92.288,1.4677954 93.674477,3.5158445 l 21.668143,50.1206965 21.66814,50.120699 -0.26538,0.23285 C 136.59942,104.11816 106.528,121.61441 69.92,142.87065 33.312,164.12688 2.892,181.80046 2.32,182.14527 l -1.04,0.62693 z" />
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<!-- Loading Spinner -->
|
||||
<symbol id="aa-loading-spinner" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<g>
|
||||
<circle cx="12" cy="12" r="10" fill="none" stroke-width="1" stroke-linecap="round">
|
||||
<animate attributeName="stroke-dasharray" dur="1.5s" calcMode="spline" values="0 150;42 150;42 150;42 150" keyTimes="0;0.475;0.95;1" keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1" repeatCount="indefinite" />
|
||||
<animate attributeName="stroke-dashoffset" dur="1.5s" calcMode="spline" values="0;-16;-59;-59" keyTimes="0;0.475;0.95;1" keySplines="0.42,0,0.58,1;0.42,0,0.58,1;0.42,0,0.58,1" repeatCount="indefinite" />
|
||||
</circle>
|
||||
|
||||
<animateTransform attributeName="transform" type="rotate" dur="2s" values="0 12 12;360 12 12" repeatCount="indefinite" />
|
||||
</g>
|
||||
</symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
@ -1,56 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
version="1.1"
|
||||
id="svg122"
|
||||
width="256"
|
||||
height="256"
|
||||
viewBox="0 0 255.99999 256"
|
||||
sodipodi:docname="allianceauth (2).svg"
|
||||
inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<defs
|
||||
id="defs126" />
|
||||
<sodipodi:namedview
|
||||
id="namedview124"
|
||||
pagecolor="#505050"
|
||||
bordercolor="#eeeeee"
|
||||
borderopacity="1"
|
||||
inkscape:showpageshadow="0"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#505050"
|
||||
showgrid="false"
|
||||
inkscape:zoom="3.8506576"
|
||||
inkscape:cx="30.514269"
|
||||
inkscape:cy="102.57988"
|
||||
inkscape:window-width="2560"
|
||||
inkscape:window-height="1369"
|
||||
inkscape:window-x="1912"
|
||||
inkscape:window-y="-8"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="g128" />
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
inkscape:label="Image"
|
||||
id="g128">
|
||||
<g
|
||||
id="g2338"
|
||||
transform="translate(41.953499,36.607802)">
|
||||
<path
|
||||
style="display:inline;fill:#e14852;stroke-width:0.32"
|
||||
d="M 131.07236,159.67687 C 109.26615,147.02458 91.302022,136.55002 91.152067,136.40007 l -0.272649,-0.27265 23.786292,-13.82371 c 13.08247,-7.60304 23.9186,-13.82025 24.08029,-13.81602 l 0.294,0.008 15.93273,36.83413 c 8.763,20.25877 15.891,36.95054 15.84,37.09283 l -0.0927,0.25869 z"
|
||||
id="path2342"
|
||||
sodipodi:nodetypes="cscsccsscc" />
|
||||
<path
|
||||
style="display:inline;fill:#436195;stroke-width:0.32"
|
||||
d="m 1.28,182.46369 c 0,-0.16969 17.354495,-40.46543 38.565546,-89.546103 L 78.411088,3.68 C 79.919052,1.4903841 82.294641,0.02199886 86.08,0.01224344 89.865359,0.00248802 92.288,1.4677954 93.674477,3.5158445 l 21.668143,50.1206965 21.66814,50.120699 -0.26538,0.23285 C 136.59942,104.11816 106.528,121.61441 69.92,142.87065 33.312,164.12688 2.892,181.80046 2.32,182.14527 l -1.04,0.62693 z"
|
||||
id="path2340"
|
||||
sodipodi:nodetypes="ssczcccssscs" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.2 KiB |
@ -159,5 +159,7 @@
|
||||
{% block extra_script %}
|
||||
{% endblock extra_script %}
|
||||
</script>
|
||||
|
||||
{% include "framework/svg/sprite.svg" %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
{% load static %}
|
||||
|
||||
<img src="{% static 'allianceauth/images/auth-logo.svg' %}" width="{{ logo_width|default:"128px" }}" height="{% if logo_height %}{{ logo_height }}{% else %}{{ logo_width|default:"128px" }}{% endif %}" alt="{{ SITE_NAME }}">
|
||||
<svg class="svg-alliance-auth-logo" width="{{ logo_width|default:"128px" }}" height="{% if logo_height %}{{ logo_height }}{% else %}{{ logo_width|default:"128px" }}{% endif %}">
|
||||
<use href="#aa-logo"></use>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 243 B After Width: | Height: | Size: 217 B |
@ -14,4 +14,5 @@ The Alliance Auth framework is split into several submodules, each of which is d
|
||||
framework/api
|
||||
framework/css
|
||||
framework/templates
|
||||
framework/svg-sprite
|
||||
:::
|
||||
|
||||
50
docs/development/custom/framework/svg-sprite.md
Normal file
50
docs/development/custom/framework/svg-sprite.md
Normal file
@ -0,0 +1,50 @@
|
||||
# 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>
|
||||
```
|
||||
Loading…
x
Reference in New Issue
Block a user