TeaSpeak/webpack-svg-sprites
TeaSpeak/webpack-svg-sprites
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Compare commits

base: TeaSpeak:master
Branches Tags
TeaSpeak:master
TeaSpeak:webpack-v5
TeaSpeak:add-license-1
..
compare: TeaSpeak:add-license-1
Branches Tags
TeaSpeak:master
TeaSpeak:webpack-v5
TeaSpeak:add-license-1

No commits in common. "master" and "add-license-1" have entirely different histories.
master ... add-licens

35 changed files with 8792 additions and 2738 deletions
Show stats Expand all files Collapse all files

5
demo/.gitignore vendored Normal file
View file

@ -0,0 +1,5 @@
dist
node_modules
app/*.js
app/*.js.map

17
demo/app/index.tsx Normal file
View file

@ -0,0 +1,17 @@
import * as React from "react";
import * as ReactDOM from "react-dom";
import {classList, spriteUrl, TestIcons, spriteEntries} from "svg-sprites/test";
console.log("Mein Hello World: AddFolder: %s, Path: %s", TestIcons.AddFolder, spriteUrl);
console.log("All entries: %O", spriteEntries);
const container = document.createElement("div");
container.style.fontSize = "100px";
document.body.append(container);
ReactDOM.render(<>
{classList.map(icon => {
return <React.Fragment key={icon}><div className={"icon_em " + icon} /><br /></React.Fragment>;
})}
</>, container);

41
demo/app/test.d.ts vendored Normal file
View file

@ -0,0 +1,41 @@
declare module "svg-sprites/test" {
export type TestIconClasses = "client-about" | "client-activate_microphone" | "client-add" | "client-add_foe" | "client-add_folder" | "client-add_friend" | "client-addon-collection" | "client-addon" | "client-apply" | "client-arrow_down" | "client-arrow_left" | "client-arrow_right" | "client-arrow_up" | "client-away" | "client-ban_client" | "client-ban_list" | "client-bookmark_add" | "client-bookmark_add_folder" | "client-bookmark_duplicate" | "client-w2g";
export enum TestIcons {
About = "client-about",
ActivateMicrophone = "client-activate_microphone",
Add = "client-add",
AddFoe = "client-add_foe",
AddFolder = "client-add_folder",
AddFriend = "client-add_friend",
AddonCollection = "client-addon-collection",
Addon = "client-addon",
Apply = "client-apply",
ArrowDown = "client-arrow_down",
ArrowLeft = "client-arrow_left",
ArrowRight = "client-arrow_right",
ArrowUp = "client-arrow_up",
Away = "client-away",
BanClient = "client-ban_client",
BanList = "client-ban_list",
BookmarkAdd = "client-bookmark_add",
BookmarkAddFolder = "client-bookmark_add_folder",
BookmarkDuplicate = "client-bookmark_duplicate",
W2g = "client-w2g",
}
export const spriteEntries: {
id: string;
className: string;
width: number;
height: number;
xOffset: number;
yOffset: number;
}[];
export const spriteUrl: string;
export const classList: string[];
export const spriteWidth: number;
export const spriteHeight: number;
}

4476
demo/package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

27
demo/package.json Normal file
View file

@ -0,0 +1,27 @@
{
"name": "svg-sprite-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@types/react": "^16.9.45",
"@types/react-dom": "^16.9.8",
"ts-loader": "^8.0.2",
"typescript": "^3.9.7",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
},
"dependencies": {
"fs": "0.0.1-security",
"fs-extra": "^9.0.1",
"html-webpack-plugin": "^4.3.0",
"react": "^16.13.1",
"react-dom": "^16.13.1"
}
}

6
demo/sprites/about.svg Normal file
View file

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="client-about" width="16"
height="16" viewBox="0 0 16 16" x="96" y="0">
<path fill="#7289da"
d="M3 1.125c-1.036 0-1.875 0.839-1.875 1.875v10c0 1.036 0.84 1.875 1.875 1.875h10c1.036 0 1.875-0.839 1.875-1.875v-10c0-1.036-0.839-1.875-1.875-1.875h-10zM7.206 2.653h1.588c0.198 0 0.365 0.069 0.501 0.209s0.205 0.31 0.205 0.514v1.552c0 0.204-0.069 0.376-0.205 0.514-0.136 0.141-0.303 0.211-0.501 0.211h-1.588c-0.198 0-0.366-0.072-0.501-0.215s-0.204-0.312-0.204-0.51v-1.552c0-0.204 0.068-0.374 0.204-0.514s0.304-0.209 0.501-0.209zM7.206 7.063h1.588c0.198 0 0.365 0.067 0.501 0.203 0.136 0.135 0.205 0.3 0.205 0.498v5.098c0 0.197-0.069 0.364-0.205 0.497-0.136 0.136-0.303 0.204-0.501 0.204h-1.588c-0.198 0-0.366-0.070-0.501-0.208-0.136-0.139-0.204-0.303-0.204-0.493v-5.098c0-0.197 0.068-0.363 0.204-0.498 0.136-0.136 0.304-0.203 0.501-0.203z"></path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 992 B

12
demo/sprites/activate_microphone.svg Normal file
View file

@ -0,0 +1,12 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="client-activate_microphone"
width="16" height="16" viewBox="0 0 16 16" x="128" y="0">
<path fill="#a9aaac"
d="M1.706 14.29c0.774 0.775 2.029 0.775 2.805 0.002l-2.807-2.807c-0.773 0.775-0.773 2.030 0.002 2.805z"></path>
<path fill="#a9aaac"
d="M4.688 10.624l0.835-0.835c0.316-0.316 0.721-0.482 1.171-0.482s0.854 0.167 1.172 0.483l0.563 0.563 0.931-0.929c-0.614-0.242-1.188-0.608-1.684-1.104-0.499-0.499-0.868-1.079-1.109-1.698l-4.103 4.103 2.095 2.095c-0.231-0.291-0.354-0.641-0.354-1.025 0-0.45 0.167-0.855 0.483-1.172z"></path>
<path fill="#7289da"
d="M13.459 6.018c0.396 0 0.758 0.13 1.054 0.376 0.647-1.369 0.406-3.057-0.724-4.187-1.438-1.438-3.777-1.438-5.215 0s-1.438 3.777 0 5.215c0.513 0.513 1.14 0.841 1.801 0.989l1.912-1.909c0.312-0.312 0.728-0.484 1.172-0.484z"></path>
<path fill="#1ca037"
d="M14.705 8.919l-5.8 5.791c-0.112 0.112-0.278 0.165-0.497 0.159-0.2-0.006-0.353-0.059-0.459-0.159l-2.502-2.502c-0.112-0.112-0.168-0.25-0.168-0.412s0.056-0.3 0.168-0.412l0.834-0.834c0.112-0.112 0.25-0.169 0.412-0.169s0.3 0.056 0.412 0.169l1.321 1.321 4.62-4.61c0.112-0.112 0.25-0.169 0.412-0.169s0.3 0.056 0.412 0.169l0.834 0.824c0.112 0.119 0.169 0.258 0.169 0.417s-0.056 0.298-0.169 0.417z"></path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

6
demo/sprites/add.svg Normal file
View file

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="client-add" width="16"
height="16" viewBox="0 0 16 16" x="160" y="0">
<path fill="#1ca037"
d="M14.715 6.985c-0.182-0.184-0.413-0.279-0.684-0.279h-4.737v-4.737c0-0.269-0.093-0.5-0.277-0.688-0.189-0.187-0.421-0.281-0.691-0.281h-0.648c-0.271 0-0.503 0.094-0.691 0.28-0.186 0.189-0.279 0.421-0.279 0.689v4.737h-4.735c-0.262 0-0.491 0.094-0.683 0.279s-0.288 0.418-0.288 0.691v0.648c0 0.277 0.096 0.509 0.285 0.691 0.181 0.184 0.413 0.278 0.685 0.278h4.736v4.736c0 0.259 0.093 0.489 0.276 0.682 0.193 0.193 0.425 0.289 0.694 0.289h0.648c0.268 0 0.501-0.095 0.69-0.283 0.185-0.189 0.279-0.42 0.279-0.688v-4.736h4.737c0.271 0 0.502-0.094 0.686-0.28 0.187-0.18 0.283-0.413 0.283-0.689v-0.648c0-0.276-0.096-0.509-0.285-0.691z"></path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 876 B

10
demo/sprites/add_foe.svg Normal file
View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="client-add_foe" width="16"
height="16" viewBox="0 0 16 16" x="192" y="0">
<path fill="#7289da"
d="M6.396 11.359c0-1.375 0.586-2.615 1.52-3.485-0.117-0.106-0.201-0.202-0.2-0.256 0.002-0.009 0.006-0.018 0.013-0.026 0.498-0.54 0.719-0.708 0.978-1.346l0.083-0.203 0.185-0.095c0.153-0.079 0.356-0.381 0.466-0.882 0.063-0.285 0.076-0.573 0.036-0.79-0.029-0.156-0.077-0.237-0.111-0.261l-0.216-0.151-0.032-0.278c-0.167-1.458-1.002-2.461-2.492-2.461-0 0-0 0-0 0s-0 0-0 0c-1.491 0-2.325 1.003-2.492 2.461l-0.032 0.278-0.216 0.151c-0.035 0.024-0.082 0.106-0.111 0.261-0.040 0.217-0.027 0.505 0.036 0.79 0.111 0.5 0.314 0.803 0.467 0.882l0.185 0.095 0.083 0.203c0.259 0.638 0.481 0.806 0.978 1.346 0.007 0.008 0.010 0.017 0.013 0.026 0.003 0.134-0.512 0.525-0.77 0.681-0.030 0.018-0.058 0.033-0.080 0.044-0.171 0.086-0.345 0.134-0.527 0.186-0.509 0.142-1.085 0.305-1.786 1.371-0.526 0.803-0.768 3.558-0.798 4.974h6.376c-0.953-0.872-1.552-2.125-1.552-3.516z"></path>
<path fill="#c90709"
d="M11.36 7.844c-1.942 0-3.516 1.574-3.516 3.515s1.574 3.516 3.516 3.516c1.941 0 3.515-1.574 3.515-3.516s-1.574-3.515-3.515-3.515z"></path>
<path fill="#fff"
d="M13.547 11.661c0 0.076-0.025 0.14-0.079 0.191-0.051 0.052-0.115 0.077-0.19 0.077h-1.348v1.348c0 0.075-0.026 0.139-0.077 0.191-0.053 0.052-0.116 0.079-0.192 0.079h-0.604c-0.076 0-0.139-0.027-0.192-0.080-0.051-0.054-0.077-0.117-0.077-0.19v-1.348h-1.348c-0.075 0-0.14-0.026-0.191-0.077-0.053-0.051-0.079-0.116-0.079-0.191v-0.604c0-0.076 0.027-0.14 0.080-0.191s0.116-0.078 0.19-0.078h1.348v-1.348c0-0.075 0.026-0.139 0.077-0.191 0.053-0.052 0.116-0.078 0.192-0.078h0.604c0.076 0 0.139 0.025 0.192 0.078 0.051 0.052 0.077 0.116 0.077 0.191v1.348h1.348c0.075 0 0.139 0.026 0.19 0.078 0.053 0.051 0.079 0.115 0.079 0.191v0.604z"></path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

8
demo/sprites/add_folder.svg Normal file
View file

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="client-add_folder" width="16"
height="16" viewBox="0 0 16 16" x="224" y="0">
<path fill="#7289da"
d="M13.801 3.864h-5.693v-0.752c0-0.593-0.481-1.074-1.074-1.074h-4.834c-0.593 0-1.074 0.481-1.074 1.074v9.775c0 0.593 0.481 1.074 1.074 1.074h11.602c0.593 0 1.074-0.481 1.074-1.074v-7.949c-0-0.593-0.481-1.074-1.074-1.074z"></path>
<path fill="#f2f2f2"
d="M10.734 9.782h-1.953v1.953c0 0.109-0.038 0.203-0.113 0.278s-0.167 0.113-0.277 0.113h-0.781c-0.11 0-0.203-0.039-0.278-0.116s-0.113-0.168-0.113-0.275v-1.953h-1.953c-0.11 0-0.203-0.040-0.278-0.116s-0.113-0.167-0.113-0.274v-0.781c0-0.11 0.038-0.203 0.113-0.278s0.168-0.113 0.278-0.113h1.953v-1.953c0-0.11 0.038-0.203 0.113-0.278s0.168-0.113 0.278-0.113h0.781c0.11 0 0.202 0.038 0.277 0.113s0.113 0.168 0.113 0.278v1.953h1.953c0.109 0 0.203 0.039 0.278 0.113s0.113 0.168 0.113 0.278v0.781c0 0.107-0.038 0.198-0.113 0.274s-0.169 0.116-0.278 0.116z"></path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1 KiB

10
demo/sprites/add_friend.svg Normal file
View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="client-add_friend" width="16"
height="16" viewBox="0 0 16 16" x="256" y="0">
<path fill="#7289da"
d="M6.396 11.359c0-1.375 0.586-2.615 1.52-3.485-0.117-0.106-0.201-0.202-0.2-0.256 0.002-0.009 0.006-0.018 0.013-0.026 0.498-0.54 0.719-0.708 0.978-1.346l0.083-0.203 0.185-0.095c0.153-0.079 0.356-0.381 0.466-0.882 0.063-0.285 0.076-0.573 0.036-0.79-0.029-0.156-0.077-0.237-0.111-0.261l-0.216-0.151-0.032-0.278c-0.167-1.458-1.002-2.461-2.492-2.461-0 0-0 0-0 0s-0 0-0 0c-1.491 0-2.325 1.003-2.492 2.461l-0.032 0.278-0.216 0.151c-0.035 0.024-0.082 0.106-0.111 0.261-0.040 0.217-0.027 0.505 0.036 0.79 0.111 0.5 0.314 0.803 0.467 0.882l0.185 0.095 0.083 0.203c0.259 0.638 0.481 0.806 0.978 1.346 0.007 0.008 0.010 0.017 0.013 0.026 0.003 0.134-0.512 0.525-0.77 0.681-0.030 0.018-0.058 0.033-0.080 0.044-0.171 0.086-0.345 0.134-0.527 0.186-0.509 0.142-1.085 0.305-1.786 1.371-0.526 0.803-0.768 3.558-0.798 4.974h6.376c-0.953-0.872-1.552-2.125-1.552-3.516z"></path>
<path fill="#1ca037"
d="M11.36 7.844c-1.942 0-3.516 1.574-3.516 3.516s1.574 3.516 3.516 3.516c1.941 0 3.515-1.574 3.515-3.516s-1.574-3.515-3.515-3.515z"></path>
<path fill="#fff"
d="M13.547 11.661c0 0.076-0.025 0.14-0.079 0.191-0.051 0.052-0.115 0.077-0.19 0.077h-1.348v1.348c0 0.075-0.026 0.139-0.077 0.191-0.053 0.052-0.116 0.079-0.192 0.079h-0.604c-0.076 0-0.139-0.027-0.192-0.080-0.051-0.054-0.077-0.117-0.077-0.19v-1.348h-1.348c-0.075 0-0.14-0.026-0.191-0.077-0.053-0.051-0.079-0.116-0.079-0.191v-0.604c0-0.076 0.027-0.14 0.080-0.191s0.116-0.078 0.19-0.078h1.348v-1.348c0-0.075 0.026-0.139 0.077-0.191 0.053-0.052 0.116-0.078 0.192-0.078h0.604c0.076 0 0.139 0.025 0.192 0.078 0.051 0.052 0.077 0.116 0.077 0.191v1.348h1.348c0.075 0 0.139 0.026 0.19 0.078 0.053 0.051 0.079 0.115 0.079 0.191v0.604z"></path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.9 KiB

6
demo/sprites/addon-collection.svg Normal file
View file

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="client-addon-collection"
width="16" height="16" viewBox="0 0 16 16" x="320" y="0">
<path fill="#1ca037"
d="M15.918 6.892c-0.088-0.666-0.264-1.317-0.526-1.936-0.451-1.097-1.11-2.054-1.993-2.845-1.985-1.774-4.306-2.447-6.914-1.956-2.367 0.446-4.174 1.758-5.4 3.837-0.874 1.481-1.213 3.091-1.040 4.805 0.006 0.054 0.013 0.108 0.020 0.161 0.145 1.261 0.545 2.435 1.276 3.473 1.86 2.644 4.413 3.857 7.628 3.509 2.352-0.254 4.212-1.424 5.583-3.357 0.321-0.462 0.595-0.956 0.817-1.473 0.325-0.736 0.481-1.518 0.582-2.313 0.091-0.637 0.046-1.273-0.032-1.905zM12.256 8.796c-0.103 0.121-0.234 0.161-0.392 0.161-0.912-0.003-1.823 0-2.734-0.005-0.143 0-0.193 0.028-0.191 0.184 0.007 0.907 0.003 1.814 0.002 2.721 0 0.348-0.124 0.471-0.476 0.471-0.327 0-0.655 0-0.982 0-0.293 0-0.429-0.138-0.43-0.434-0.002-0.923-0.005-1.847 0-2.77 0-0.134-0.032-0.173-0.17-0.172-0.917 0.007-1.833 0-2.75 0.007-0.166 0.002-0.292-0.043-0.396-0.164-0.039-0.102-0.058-0.21-0.055-0.32 0.003-0.339 0.006-0.678-0.002-1.016-0.005-0.226 0.11-0.397 0.384-0.395 0.295 0.002 0.59 0 0.884 0 0.633 0 1.266-0.005 1.901 0.003 0.158 0.002 0.212-0.028 0.21-0.203-0.011-0.902-0.006-1.803-0.006-2.705-0.002-0.054 0.001-0.109 0.008-0.163 0.032-0.201 0.1-0.288 0.302-0.3 0.414-0.028 0.829-0.027 1.242 0.002 0.23 0.017 0.336 0.171 0.336 0.421 0 0.913 0.003 1.825-0.005 2.738-0.002 0.158 0.027 0.213 0.202 0.211 0.9-0.010 1.801-0.005 2.702-0.005 0.345 0 0.471 0.129 0.471 0.476 0 0.306-0.002 0.613 0 0.918 0 0.114-0.019 0.228-0.056 0.336v0z"></path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

6
demo/sprites/addon.svg Normal file
View file

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="client-addon" width="16"
height="16" viewBox="0 0 16 16" x="288" y="0">
<path fill="#7289da"
d="M11.98 12.488c0 0.133-0.073 0.11-0.149 0.11-1.006 0-2.011 0.002-3.017-0.003-0.148 0-0.205 0.037-0.195 0.193 0.008 0.125 0.012 0.25 0.031 0.375 0.029 0.21 0.102 0.378 0.291 0.521 0.59 0.444 0.594 1.188 0.015 1.646-0.538 0.428-1.154 0.512-1.803 0.323-0.276-0.081-0.537-0.203-0.743-0.427-0.438-0.475-0.411-1.107 0.087-1.516 0.176-0.145 0.372-0.274 0.444-0.5 0.055-0.171 0.090-0.35 0.058-0.534-0.018-0.106-0.094-0.076-0.156-0.076-0.88 0-1.76-0.004-2.64 0.002-0.141 0-0.181-0.033-0.179-0.178 0.007-0.958 0.006-1.917 0.002-2.875-0.006-0.098 0.040-0.193 0.121-0.25 0.436-0.341 1.099-0.236 1.408 0.227 0.227 0.341 0.539 0.551 0.952 0.488 0.493-0.076 0.819-0.396 1.005-0.851 0.138-0.333 0.189-0.696 0.149-1.055-0.063-0.365-0.19-0.703-0.439-0.986-0.373-0.422-0.981-0.493-1.409-0.201-0.137 0.094-0.235 0.236-0.322 0.38-0.037 0.063-0.097 0.109-0.168 0.128-0.307 0.094-0.617 0.143-0.922 0.016-0.237-0.099-0.385-0.202-0.379-0.536 0.018-0.994 0.012-1.989 0.003-2.984-0.002-0.167 0.049-0.193 0.2-0.192 0.9 0.007 1.801 0 2.701 0.007 0.138 0 0.212-0.050 0.267-0.164 0.166-0.344 0.13-0.691 0.037-1.041-0.018-0.069-0.086-0.087-0.136-0.122-0.261-0.181-0.476-0.397-0.547-0.719-0.087-0.397 0.063-0.719 0.347-0.987 0.642-0.605 1.877-0.607 2.527-0.009 0.557 0.513 0.497 1.231-0.142 1.681-0.386 0.277-0.509 0.803-0.287 1.224 0.054 0.099 0.119 0.138 0.235 0.137 0.869-0.005 1.738 0 2.607-0.004 0.1 0 0.147 0.012 0.147 0.132-0.004 1.393 0 2.785 0 4.178-0.001 0.021-0.003 0.042-0.006 0.063-0.001 1.459-0 2.921 0.007 4.381z"></path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

6
demo/sprites/apply.svg Normal file
View file

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="client-apply" width="16"
height="16" viewBox="0 0 16 16" x="352" y="0">
<path fill="#1ca037"
d="M2.539 8.041c0.169-0.168 0.369-0.255 0.6-0.25 0.228-0.002 0.427 0.082 0.595 0.25l1.924 1.924 6.608-6.608c0.168-0.168 0.366-0.251 0.595-0.253 0.233 0.001 0.432 0.083 0.601 0.251l0.458 0.458c0.169 0.169 0.25 0.37 0.25 0.604-0.006 0.232-0.089 0.431-0.251 0.592 0 0-7.421 7.421-7.534 7.534s-0.352 0.351-0.726 0.351c-0.374 0-0.622-0.247-0.726-0.351s-2.851-2.851-2.851-2.851c-0.168-0.168-0.251-0.367-0.25-0.595-0.004-0.231 0.082-0.431 0.25-0.599l0.458-0.458z"></path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 709 B

10
demo/sprites/arrow_down.svg Normal file
View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="client-arrow_down" width="16"
height="16" viewBox="0 0 16 16" x="384" y="0">
<path fill="#7289da"
d="M8.001 0.178c-4.337 0-7.853 3.516-7.853 7.853s3.516 7.853 7.853 7.853c4.336 0 7.852-3.516 7.852-7.853s-3.516-7.853-7.852-7.853z"></path>
<path fill="#0f0"
d="M7.122 14.647c-0.007 0-0.014-0.001-0.022-0.001-0.006 0-0.011 0.001-0.017 0-0.191-0.002-0.357-0.074-0.499-0.216l-3.895-3.895c-0.136-0.136-0.207-0.301-0.213-0.496-0.006-0.194 0.060-0.36 0.198-0.498l1.242-1.242c0.137-0.137 0.301-0.204 0.495-0.201 0.19 0.002 0.357 0.073 0.5 0.216l1.52 1.52v-7.112c0-0.193 0.067-0.359 0.2-0.501s0.297-0.212 0.492-0.212h1.756c0.194 0 0.357 0.069 0.492 0.208 0.133 0.136 0.201 0.305 0.201 0.506l0 6.254v4.959c0 0.2-0.068 0.368-0.201 0.505-0.135 0.138-0.298 0.206-0.492 0.206z"></path>
<path fill="#fff"
d="M7.122 14.647c-0.007 0-0.014-0.001-0.022-0.001-0.006 0-0.011 0.001-0.017 0-0.191-0.002-0.357-0.074-0.499-0.216l-3.895-3.895c-0.136-0.136-0.207-0.301-0.213-0.496-0.006-0.194 0.060-0.36 0.198-0.498l1.242-1.242c0.137-0.137 0.301-0.204 0.495-0.201 0.19 0.002 0.357 0.073 0.5 0.216l1.52 1.519v-0.857l0-6.254c0-0.024 0.001-0.048 0.003-0.071 0.014-0.17 0.081-0.315 0.198-0.435 0.097-0.099 0.208-0.162 0.334-0.19 0.028-0.006 0.056-0.011 0.085-0.014 0.020-0.002 0.041-0.003 0.062-0.003 0.003-0 0.007-0.001 0.010-0.001 0 0 0 0 0.001 0h1.755c0.004 0 0.007 0.001 0.011 0.001 0.021 0 0.041 0.001 0.062 0.003 0.023 0.002 0.045 0.005 0.067 0.010 0.006 0.001 0.012 0.003 0.018 0.004 0.126 0.028 0.238 0.091 0.334 0.19 0.117 0.12 0.183 0.265 0.198 0.435 0.002 0.023 0.003 0.047 0.003 0.071l0 6.254v0.857l1.52-1.519c0.142-0.142 0.31-0.213 0.5-0.216 0.193-0.002 0.357 0.064 0.495 0.201l1.242 1.242c0.138 0.138 0.203 0.304 0.198 0.498-0.006 0.195-0.077 0.36-0.213 0.496l-3.895 3.895c-0.141 0.141-0.308 0.213-0.499 0.216-0.006 0-0.011-0-0.017-0-0.007 0-0.014 0.001-0.022 0.001h-0z"></path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2 KiB

10
demo/sprites/arrow_left.svg Normal file
View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="client-arrow_left" width="16"
height="16" viewBox="0 0 16 16" x="416" y="0">
<path fill="#7289da"
d="M8.001 0.178c-4.337 0-7.853 3.516-7.853 7.853s3.516 7.853 7.853 7.853c4.336 0 7.852-3.516 7.852-7.853s-3.516-7.853-7.852-7.853z"></path>
<path fill="#0f0"
d="M1.681 7.45c0-0.007 0.001-0.014 0.001-0.022-0-0.006-0.001-0.011-0-0.017 0.002-0.191 0.074-0.357 0.216-0.499l3.895-3.895c0.136-0.136 0.301-0.207 0.496-0.213 0.194-0.006 0.36 0.060 0.498 0.198l1.242 1.242c0.137 0.137 0.204 0.301 0.201 0.495-0.002 0.19-0.073 0.357-0.216 0.5l-1.52 1.52h7.112c0.193 0 0.359 0.067 0.501 0.2s0.212 0.297 0.212 0.492v1.756c0 0.194-0.069 0.357-0.208 0.492-0.136 0.133-0.305 0.201-0.506 0.201l-11.214 0c-0.2 0-0.368-0.068-0.505-0.201-0.138-0.135-0.206-0.298-0.206-0.492z"></path>
<path fill="#fff"
d="M1.681 7.45c0-0.007 0.001-0.014 0.001-0.022-0-0.006-0.001-0.011-0-0.017 0.002-0.191 0.074-0.357 0.216-0.499l3.895-3.895c0.136-0.136 0.301-0.207 0.496-0.213 0.194-0.006 0.36 0.060 0.498 0.198l1.242 1.242c0.137 0.137 0.204 0.301 0.201 0.495-0.002 0.19-0.073 0.357-0.216 0.5l-1.519 1.52 7.112 0c0.024 0 0.048 0.001 0.071 0.003 0.17 0.014 0.315 0.081 0.435 0.198 0.099 0.097 0.162 0.208 0.19 0.334 0.006 0.028 0.011 0.056 0.014 0.085 0.002 0.020 0.003 0.041 0.003 0.062 0 0.003 0.001 0.007 0.001 0.010 0 0 0 0 0 0.001v1.755c0 0.004-0.001 0.007-0.001 0.011-0 0.021-0.001 0.041-0.003 0.062-0.002 0.023-0.005 0.045-0.010 0.067-0.001 0.006-0.003 0.012-0.004 0.018-0.028 0.126-0.091 0.238-0.19 0.334-0.12 0.117-0.265 0.183-0.435 0.198-0.023 0.002-0.047 0.003-0.071 0.003l-7.112 0 1.519 1.52c0.142 0.142 0.213 0.31 0.216 0.5 0.002 0.193-0.064 0.357-0.201 0.495l-1.242 1.242c-0.138 0.138-0.304 0.203-0.498 0.198-0.195-0.006-0.36-0.077-0.496-0.213l-3.895-3.895c-0.141-0.141-0.213-0.308-0.216-0.499-0-0.006 0-0.011 0-0.017-0-0.007-0.001-0.014-0.001-0.022v-0z"></path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2 KiB

10
demo/sprites/arrow_right.svg Normal file
View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="client-arrow_right" width="16"
height="16" viewBox="0 0 16 16" x="448" y="0">
<path fill="#7289da"
d="M8.001 0.178c-4.337 0-7.853 3.516-7.853 7.853s3.516 7.853 7.853 7.853c4.336 0 7.852-3.516 7.852-7.853s-3.516-7.853-7.852-7.853z"></path>
<path fill="#0f0"
d="M14.319 9.207c0 0.007-0.001 0.014-0.001 0.022 0 0.006 0.001 0.011 0 0.017-0.002 0.191-0.074 0.357-0.216 0.499l-3.895 3.895c-0.136 0.136-0.301 0.207-0.496 0.213-0.194 0.006-0.36-0.060-0.498-0.198l-1.242-1.242c-0.137-0.137-0.204-0.301-0.201-0.495 0.002-0.19 0.073-0.357 0.216-0.5l1.52-1.52h-7.112c-0.193 0-0.359-0.067-0.501-0.2s-0.212-0.297-0.212-0.492v-1.756c0-0.194 0.069-0.357 0.208-0.492 0.136-0.133 0.305-0.201 0.506-0.201l11.214-0c0.2 0 0.368 0.068 0.505 0.201 0.138 0.135 0.206 0.298 0.206 0.492z"></path>
<path fill="#fff"
d="M14.319 9.207c0 0.007-0.001 0.014-0.001 0.022 0 0.006 0.001 0.011 0 0.017-0.002 0.191-0.074 0.357-0.216 0.499l-3.895 3.895c-0.136 0.136-0.301 0.207-0.496 0.213-0.194 0.006-0.36-0.060-0.498-0.198l-1.242-1.242c-0.137-0.137-0.204-0.301-0.201-0.495 0.002-0.19 0.073-0.357 0.216-0.5l1.519-1.52-7.112-0c-0.024 0-0.048-0.001-0.071-0.003-0.17-0.014-0.315-0.081-0.435-0.198-0.099-0.097-0.162-0.208-0.19-0.334-0.006-0.028-0.011-0.056-0.014-0.085-0.002-0.020-0.003-0.041-0.003-0.062-0-0.003-0-0.007-0-0.010 0-0 0-0 0-0.001v-1.755c0-0.004 0-0.007 0-0.011 0-0.021 0.001-0.041 0.003-0.062 0.002-0.023 0.005-0.045 0.010-0.067 0.001-0.006 0.003-0.012 0.004-0.018 0.028-0.126 0.091-0.238 0.19-0.334 0.12-0.117 0.265-0.183 0.435-0.198 0.023-0.002 0.047-0.003 0.071-0.003l7.112-0-1.519-1.52c-0.142-0.142-0.213-0.31-0.216-0.5-0.002-0.193 0.064-0.357 0.201-0.495l1.242-1.242c0.138-0.138 0.304-0.203 0.498-0.198 0.195 0.006 0.36 0.077 0.496 0.213l3.895 3.895c0.141 0.141 0.213 0.308 0.216 0.499 0 0.006-0 0.011-0 0.017 0 0.007 0.001 0.014 0.001 0.022v0z"></path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2 KiB

10
demo/sprites/arrow_up.svg Normal file
View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="client-arrow_up" width="16"
height="16" viewBox="0 0 16 16" x="480" y="0">
<path fill="#7289da"
d="M8.001 0.178c-4.337 0-7.853 3.516-7.853 7.853s3.516 7.853 7.853 7.853c4.336 0 7.852-3.516 7.852-7.853s-3.516-7.853-7.852-7.853z"></path>
<path fill="#0f0"
d="M7.122 2.010c-0.007 0-0.014 0.001-0.022 0.001-0.006-0-0.011-0.001-0.017-0-0.191 0.002-0.357 0.074-0.499 0.216l-3.895 3.895c-0.136 0.136-0.207 0.301-0.213 0.496-0.006 0.194 0.060 0.36 0.198 0.498l1.242 1.242c0.137 0.137 0.301 0.204 0.495 0.201 0.19-0.002 0.357-0.073 0.5-0.216l1.52-1.52v7.112c0 0.193 0.067 0.359 0.2 0.501s0.297 0.212 0.492 0.212h1.756c0.194 0 0.357-0.069 0.492-0.208 0.133-0.136 0.201-0.305 0.201-0.506l0-6.254v-4.959c0-0.2-0.068-0.368-0.201-0.505-0.135-0.138-0.298-0.206-0.492-0.206h-1.756z"></path>
<path fill="#fff"
d="M7.122 2.010c-0.007 0-0.014 0.001-0.022 0.001-0.006-0-0.011-0.001-0.017-0-0.191 0.002-0.357 0.074-0.499 0.216l-3.895 3.895c-0.136 0.136-0.207 0.301-0.213 0.496-0.006 0.194 0.060 0.36 0.198 0.498l1.242 1.242c0.137 0.137 0.301 0.204 0.495 0.201 0.19-0.002 0.357-0.073 0.5-0.216l1.52-1.519v0.857l0 6.254c0 0.024 0.001 0.048 0.003 0.071 0.014 0.17 0.081 0.315 0.198 0.435 0.097 0.099 0.208 0.162 0.334 0.19 0.028 0.006 0.056 0.011 0.085 0.014 0.020 0.002 0.041 0.003 0.062 0.003 0.003 0 0.007 0 0.010 0 0 0 0 0 0.001 0h1.755c0.004 0 0.007-0 0.011-0 0.021-0 0.041-0.001 0.062-0.003 0.023-0.002 0.045-0.005 0.067-0.010 0.006-0.001 0.012-0.003 0.018-0.004 0.126-0.028 0.238-0.091 0.334-0.19 0.117-0.12 0.183-0.265 0.198-0.435 0.002-0.023 0.003-0.047 0.003-0.071l0-6.254v-0.857l1.52 1.519c0.142 0.142 0.31 0.213 0.5 0.216 0.193 0.002 0.357-0.064 0.495-0.201l1.242-1.242c0.138-0.138 0.203-0.304 0.198-0.498-0.006-0.195-0.077-0.36-0.213-0.496l-3.895-3.895c-0.141-0.141-0.308-0.213-0.499-0.216-0.006-0-0.011 0-0.017 0-0.007-0-0.014-0.001-0.022-0.001h-1.757z"></path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2 KiB

9
demo/sprites/away.svg Normal file
View file

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="client-away" width="16"
height="16" viewBox="0 0 16 16" x="0" y="32">
<path fill="#7289da"
d="M14.875 13.808c0 0.593-0.481 1.074-1.074 1.074h-11.601c-0.593 0-1.074-0.481-1.074-1.074v-6.016c0-0.593 0.481-1.074 1.074-1.074h11.602c0.593 0 1.074 0.481 1.074 1.074v6.016h-0z"></path>
<path fill="#fff"
d="M8.991 10.623l1.589 1.595c0.070 0.070 0.105 0.153 0.105 0.249s-0.035 0.178-0.105 0.244l-0.493 0.493c-0.066 0.070-0.149 0.105-0.247 0.105s-0.18-0.035-0.247-0.105l-1.595-1.589-1.595 1.589c-0.066 0.070-0.149 0.105-0.247 0.105s-0.18-0.035-0.247-0.105l-0.493-0.493c-0.070-0.066-0.105-0.148-0.105-0.244s0.035-0.179 0.105-0.249l1.589-1.595-1.589-1.589c-0.070-0.070-0.105-0.153-0.105-0.249s0.035-0.179 0.105-0.249l0.493-0.493c0.066-0.066 0.149-0.1 0.247-0.1s0.18 0.033 0.247 0.1l1.595 1.595 1.594-1.595c0.066-0.066 0.149-0.1 0.247-0.1s0.18 0.033 0.247 0.1l0.493 0.493c0.070 0.070 0.105 0.153 0.105 0.249s-0.035 0.179-0.105 0.249l-1.589 1.589z"></path>
<path fill="#a9aaac" d="M8 2.93l2.146 2.515h1.787l-3.933-4.609-3.933 4.609h1.787l2.146-2.515z"></path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

9
demo/sprites/ban_client.svg Normal file
View file

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="client-ban_client" width="16"
height="16" viewBox="0 0 16 16" x="32" y="32">
<path fill="#7289da"
d="M6.235 11.359c0-1.375 0.586-2.615 1.52-3.485-0.117-0.106-0.201-0.202-0.2-0.256 0.002-0.009 0.006-0.018 0.013-0.026 0.498-0.54 0.719-0.708 0.978-1.346l0.083-0.203 0.185-0.095c0.153-0.079 0.356-0.381 0.466-0.882 0.063-0.285 0.076-0.573 0.036-0.79-0.029-0.156-0.077-0.237-0.111-0.261l-0.216-0.151-0.032-0.278c-0.167-1.458-1.002-2.461-2.492-2.461-0 0-0 0-0 0s-0 0-0 0c-1.491 0-2.325 1.003-2.493 2.461l-0.032 0.278-0.216 0.151c-0.035 0.024-0.082 0.106-0.111 0.261-0.040 0.217-0.027 0.505 0.036 0.79 0.111 0.5 0.314 0.803 0.467 0.882l0.185 0.095 0.083 0.203c0.259 0.638 0.481 0.806 0.978 1.346 0.007 0.008 0.010 0.017 0.013 0.026 0.003 0.134-0.512 0.525-0.77 0.681-0.030 0.018-0.058 0.033-0.080 0.044-0.171 0.086-0.345 0.134-0.527 0.186-0.509 0.142-1.085 0.305-1.786 1.371-0.526 0.803-0.768 3.558-0.798 4.975h6.376c-0.953-0.872-1.552-2.125-1.552-3.516z"></path>
<path fill="#c90709"
d="M11.089 8.834c1.401 0 2.54 1.14 2.54 2.541s-1.139 2.54-2.54 2.54c-1.401 0-2.54-1.139-2.54-2.54s1.14-2.541 2.54-2.541zM11.089 7.875c-1.933 0-3.5 1.568-3.5 3.5s1.567 3.5 3.5 3.5c1.933 0 3.5-1.567 3.5-3.5s-1.567-3.5-3.5-3.5z"></path>
<path fill="#c90709" d="M9.091 14.070l-0.708-0.709 4.692-4.692 0.709 0.708-4.693 4.693z"></path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

15
demo/sprites/ban_list.svg Normal file
View file

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="client-ban_list" width="16"
height="16" viewBox="0 0 16 16" x="64" y="32">
<path fill="#c90709"
d="M10.884 7.714c1.748 0 3.169 1.422 3.169 3.17s-1.422 3.17-3.169 3.17c-1.748 0-3.17-1.422-3.17-3.169s1.422-3.17 3.17-3.17zM10.884 6.518c-2.411 0-4.366 1.955-4.366 4.366s1.955 4.366 4.366 4.366c2.411 0 4.366-1.955 4.366-4.366s-1.955-4.366-4.366-4.366z"></path>
<path fill="#c90709" d="M13.361 7.508l0.884 0.884-5.853 5.853-0.884-0.884 5.853-5.853z"></path>
<path fill="#a9aaac"
d="M6.279 14.001h-3.654c-0.345 0-0.625-0.28-0.625-0.625v-10.751c0-0.345 0.28-0.625 0.625-0.625h9.059c0.345 0 0.625 0.28 0.625 0.625 0 0 0 1.933 0 2.883 0.44 0.117 0.859 0.286 1.25 0.502v-3.384c0-1.034-0.841-1.875-1.875-1.875h-9.059c-1.034 0-1.875 0.841-1.875 1.875v10.751c0 1.034 0.841 1.875 1.875 1.875h4.819c-0.449-0.354-0.843-0.776-1.165-1.25z"></path>
<path fill="#a9aaac"
d="M10.862 4.125c-0.113-0.115-0.271-0.187-0.445-0.187h-6.896c-0.345 0-0.625 0.28-0.625 0.625 0 0.17 0.068 0.323 0.178 0.436l-0.002 0.002c0.113 0.115 0.271 0.187 0.445 0.187h6.896c0.345 0 0.625-0.28 0.625-0.625 0-0.17-0.068-0.323-0.178-0.436l0.002-0.002z"></path>
<path fill="#a9aaac"
d="M2.895 8.001c0 0.345 0.28 0.625 0.625 0.625h2.282c0.201-0.451 0.46-0.871 0.769-1.25h-3.051c-0.345 0-0.625 0.28-0.625 0.625z"></path>
<path fill="#a9aaac"
d="M2.895 11.438c0 0.345 0.28 0.625 0.625 0.625h1.928c-0.082-0.38-0.127-0.775-0.127-1.179 0-0.024 0.002-0.047 0.002-0.071h-1.803c-0.345 0-0.625 0.28-0.625 0.625z"></path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

11
demo/sprites/bookmark_add.svg Normal file
View file

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="client-bookmark_add" width="16"
height="16" viewBox="0 0 16 16" x="96" y="32">
<path fill="#7289da" d="M4.885 14.875l-1.88-1.858-1.88 1.858v-13.75h3.76v13.75z"></path>
<path fill="#ccc"
d="M12.755 6.57v1.566h1.566c0.191 0 0.378 0.031 0.554 0.089v-7.101h-3.76v3.695c0.427 0.027 0.824 0.203 1.128 0.507 0.33 0.33 0.512 0.772 0.512 1.243z"></path>
<path fill="#b3b3b3"
d="M8.137 8.136v-1.566c0-0.471 0.182-0.913 0.513-1.245 0.327-0.327 0.764-0.507 1.23-0.511v-3.69h-3.76v7.071c0.145-0.038 0.296-0.059 0.45-0.059l1.566 0z"></path>
<path fill="#1ca037"
d="M14.321 11.553h-2.768v2.768c0 0.155-0.053 0.287-0.16 0.393s-0.238 0.16-0.393 0.16h-1.107c-0.156 0-0.287-0.055-0.394-0.164s-0.16-0.24-0.16-0.389v-2.768h-2.768c-0.156 0-0.287-0.055-0.394-0.165s-0.16-0.239-0.16-0.389v-1.107c0-0.156 0.053-0.287 0.16-0.394s0.238-0.16 0.394-0.16h2.768v-2.768c0-0.156 0.053-0.287 0.16-0.394s0.238-0.16 0.394-0.16h1.107c0.156 0 0.287 0.053 0.393 0.16s0.16 0.238 0.16 0.394v2.768h2.768c0.155 0 0.287 0.054 0.393 0.16s0.16 0.238 0.16 0.394v1.107c0 0.15-0.053 0.279-0.16 0.389s-0.238 0.165-0.393 0.165z"></path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.2 KiB

10
demo/sprites/bookmark_add_folder.svg Normal file
View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="client-bookmark_add_folder"
width="16" height="16" viewBox="0 0 16 16" x="128" y="32">
<path fill="#7289da"
d="M9.865 3.408h-1.758v-0.752c0-0.593-0.481-1.074-1.074-1.074h-4.834c-0.593 0-1.074 0.481-1.074 1.074v9.775c0 0.593 0.481 1.074 1.074 1.074h7.666v-10.097z"></path>
<path fill="#ccc"
d="M13.801 3.408h-2.686v11.011l1.88-1.858 1.88 1.858v-9.936c0-0.593-0.481-1.074-1.074-1.074z"></path>
<path fill="#e6e6e6"
d="M7.961 9.193h-1.758v1.758c0 0.098-0.034 0.183-0.102 0.25s-0.151 0.102-0.25 0.102h-0.703c-0.099 0-0.183-0.036-0.25-0.104s-0.102-0.152-0.102-0.247v-1.758h-1.758c-0.099 0-0.183-0.036-0.25-0.105s-0.102-0.151-0.102-0.247v-0.703c0-0.099 0.034-0.183 0.102-0.25s0.151-0.102 0.25-0.102h1.758v-1.758c0-0.099 0.034-0.183 0.102-0.25s0.151-0.102 0.25-0.102h0.703c0.099 0 0.182 0.034 0.25 0.102s0.102 0.151 0.102 0.25v1.758h1.758c0.098 0 0.183 0.035 0.25 0.102s0.102 0.151 0.102 0.25v0.703c0 0.096-0.034 0.178-0.102 0.247s-0.152 0.105-0.25 0.105z"></path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.1 KiB

10
demo/sprites/bookmark_duplicate.svg Normal file
View file

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="client-bookmark_duplicate"
width="16" height="16" viewBox="0 0 16 16" x="160" y="32">
<path fill="#7289da"
d="M5.814 11.281v-1.094h-1.093c-0.467 0-0.904-0.184-1.228-0.516-0.317-0.324-0.491-0.752-0.491-1.203v-0.937c0-0.461 0.178-0.893 0.502-1.218 0.324-0.323 0.756-0.501 1.217-0.501h1.093v-1.093c0-0.461 0.178-0.894 0.503-1.218 0.286-0.285 0.656-0.457 1.057-0.493v-1.883h-6.25v13.75l3.125-2.233 3.125 2.233v-1.883c-0.405-0.037-0.78-0.213-1.066-0.506-0.318-0.324-0.493-0.752-0.493-1.205z"></path>
<path fill="#a9aaac"
d="M8.626 1.125v1.883c0.402 0.035 0.774 0.207 1.061 0.494 0.323 0.324 0.502 0.756 0.502 1.217v1.093h1.094c0.461 0 0.893 0.178 1.217 0.502s0.501 0.756 0.501 1.217v0.937c0 0.452-0.175 0.879-0.49 1.201-0.325 0.334-0.761 0.518-1.229 0.518h-1.094v1.094c0 0.461-0.178 0.893-0.502 1.217-0.287 0.287-0.659 0.459-1.061 0.494v1.883l3.125-2.233 3.125 2.233v-13.75h-6.25z"></path>
<path fill="#1ca037"
d="M11.283 8.938h-2.344v2.344c0 0.131-0.045 0.243-0.136 0.333s-0.201 0.136-0.333 0.136h-0.937c-0.132 0-0.243-0.047-0.333-0.139s-0.136-0.203-0.136-0.33v-2.344h-2.344c-0.132 0-0.243-0.047-0.333-0.139s-0.136-0.202-0.136-0.329v-0.937c0-0.132 0.045-0.243 0.135-0.333s0.202-0.136 0.333-0.136h2.344v-2.343c0-0.132 0.045-0.243 0.136-0.333s0.202-0.136 0.334-0.136h0.937c0.132 0 0.243 0.045 0.333 0.135s0.136 0.202 0.136 0.333v2.343h2.344c0.131 0 0.243 0.046 0.333 0.136s0.136 0.202 0.136 0.334v0.937c0 0.128-0.045 0.237-0.136 0.329s-0.202 0.139-0.333 0.139z"></path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

4
demo/sprites/w2g.svg Normal file
View file

@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" height="100%" version="1.1" viewBox="0 0 68 48" width="100%">
<path d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#f00"></path>
<path d="M 45,24 27,14 27,34" fill="#fff"></path>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 506 B

12
demo/tsconfig.json Normal file
View file

@ -0,0 +1,12 @@
{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"sourceMap": true,
"baseUrl": ".",
"jsx": "react"
},
"include": [
"app"
]
}

63
demo/webpack.config.ts Normal file
View file

@ -0,0 +1,63 @@
import * as path from "path";
import {Configuration} from "webpack";
import * as SpriteGenerator from "../plugin";
import * as HtmlWebpackPlugin from "html-webpack-plugin";
export = {
entry: path.join(__dirname, "app", "index.tsx"),
target: "web",
plugins: [
new SpriteGenerator.Plugin({
dtsOutputFolder: path.join(__dirname, "app"),
configurations: {
test: {
folder: path.join(__dirname, "sprites"),
cssClassPrefix: "client-",
dtsOptions: {
module: true,
enumName: "TestIcons",
classUnionName: "TestIconClasses",
cssClassPrefix: "client-",
},
cssOptions: [
{
scale: 1,
selector: ".icon",
unit: "px"
},
{
scale: 2,
selector: ".icon_x2",
unit: "px"
},
{
scale: 1,
selector: ".icon_em",
unit: "em"
}
]
}
}
}),
new HtmlWebpackPlugin()
],
module: {
rules: [
{
test: /\.tsx?$/,
loader: [
"ts-loader"
]
}
]
},
mode: process.env.NODE_ENV === "development" ? "development" : "production",
resolve: {
extensions: [".ts", ".tsx", ".css", ".js"]
},
output: {
filename: "[name].[contenthash].js",
}
} as Configuration;

6394
package-lock.json generated
View file

File diff suppressed because it is too large Load diff

41
package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "webpack-svg-sprite-generator", "name": "webpack-svg-sprite-generator",
"version": "5.0.7", "version": "1.0.11",
"description": "", "description": "",
"main": "plugin.js", "main": "plugin.js",
"types": "ts/index.d.ts", "types": "ts/index.d.ts",
@ -8,35 +8,24 @@
"build": "webpack" "build": "webpack"
}, },
"keywords": [], "keywords": [],
"author": "WolverinDEV", "author": "",
"license": "GPL-3.0", "license": "ISC",
"bugs": {
"url": "https://git.kle.li/TeaSpeak/webpack-svg-sprites/issues"
},
"repository": {
"url": "https://git.kle.li/TeaSpeak/webpack-svg-sprites.git",
"type": "git"
},
"devDependencies": { "devDependencies": {
"@types/fs-extra": "^11.0.4", "@types/tapable": "^1.0.6",
"@types/tapable": "^2.2.7", "@types/webpack": "^4.41.21",
"@types/webpack": "^5.28.5", "change-case": "^4.1.1",
"change-case": "^4.1.2", "clean-webpack-plugin": "^3.0.0",
"clean-webpack-plugin": "^4.0.0", "copy-webpack-plugin": "^6.0.3",
"copy-webpack-plugin": "^11.0.0",
"html-webpack-plugin": "^5.5.3",
"potpack": "^2.0.0",
"sha1": "^1.1.1", "sha1": "^1.1.1",
"ts-loader": "^9.5.1", "ts-loader": "^8.0.2",
"ts-node": "^10.9.1", "typescript": "^3.9.7",
"typescript": "^5.2.2", "webpack-cli": "^3.3.12",
"webpack": "^5.89.0",
"webpack-cli": "^5.1.4",
"xml-parser": "^1.2.1" "xml-parser": "^1.2.1"
}, },
"peerDependencies": { "dependencies": {
"fs-extra": "^11.1.1",
"path": "^0.12.7", "path": "^0.12.7",
"webpack": "^5.x" "webpack": "^4.44.1",
"fs-extra": "^9.0.1",
"potpack": "^1.0.1"
} }
} }

97
plugin/generator.ts
View file

@ -1,9 +1,11 @@
import * as fs from "fs-extra"; import * as fs from "fs-extra";
import * as path from "path"; import * as path from "path";
import * as XMLParser from "xml-parser";
import { pascalCase } from "change-case"; import { pascalCase } from "change-case";
import XMLParser from "xml-parser"; let potpack = require("potpack");
import potpack from "potpack"; if(typeof potpack !== "function" && potpack.default)
potpack = potpack.default;
function generateAttributes(attributes: XMLParser.Attributes) { function generateAttributes(attributes: XMLParser.Attributes) {
const keys = Object.keys(attributes); const keys = Object.keys(attributes);
@ -19,8 +21,8 @@ function jsNode2xml(indent: string, data: XMLParser.Node) {
const tagOpen = `<${data.name}${generateAttributes(data.attributes)}>`; const tagOpen = `<${data.name}${generateAttributes(data.attributes)}>`;
const tagClose = `</${data.name}>`; const tagClose = `</${data.name}>`;
let content = data.children.length ? data.children.map(e => jsNode2xml(indent + " ", e)).join("\n") : data.content || ""; let content = data.children.length ? data.children.map(e => jsNode2xml(indent + " ", e)).join("\n") : data.content;
if(content.length !== 0) if(content?.length !== 0)
content = "\n" + content + "\n" + indent; content = "\n" + content + "\n" + indent;
return ( return (
@ -48,7 +50,7 @@ export async function generateSpriteSvg(sprite: GeneratedSprite) {
let result = ""; let result = "";
result += `<?xml version="1.0" encoding="utf-8"?>\n`; result += `<?xml version="1.0" encoding="utf-8"?>\n`;
result += `<!-- ${sprite.entries.length} icons packed -->\n`; result += `<!-- ${sprite.entries.length} icons packed -->\n`;
result += `<svg xmlns="http://www.w3.org/2000/svg" width="${sprite.width}" height="${sprite.height}" viewBox="0 0 ${sprite.width} ${sprite.height}">\n`; result += `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${sprite.width}" height="${sprite.height}" viewBox="0 0 ${sprite.width} ${sprite.height}">\n`;
for(const file of sprite.entries) { for(const file of sprite.entries) {
const root = file.data.root; const root = file.data.root;
@ -91,14 +93,21 @@ export async function generateSpriteCss(options: SpriteCssOptions, classPrefix:
let result = ""; let result = "";
result += `${options.selector}{`; result += `${options.selector}{`;
result += `display:inline-block;`; result += `display:inline-block;`;
/* doing a relative path here as well since WebPack may messes around here since the public path may start with / and if it's a file path / means the root... */ result += `background:url("${publicUrl}") no-repeat;`;
result += `background-image:url(".${publicUrl}"),url("${publicUrl}");`;
result += `background-repeat:no-repeat;`;
result += `background-size:${sprite.width * scaleX}${options.unit} ${sprite.height * scaleY}${options.unit};`; result += `background-size:${sprite.width * scaleX}${options.unit} ${sprite.height * scaleY}${options.unit};`;
result += `height:${defaultHeight * scaleY}${options.unit};`; result += `height:${defaultHeight * scaleY}${options.unit};`;
result += `width:${defaultWidth * scaleX}${options.unit}`; result += `width:${defaultWidth * scaleX}${options.unit}`;
result += `}`; result += `}`;
/*
const unit = (value: number) => {
let valStr = value.toString();
if(valStr.length < 5)
valStr = " ".substr(valStr.length - 5) + valStr;
return value === 0 ? `${valStr} ` : `${valStr}${options.unit}`;
};
*/
const unit = (value: number) => { const unit = (value: number) => {
let valStr = value.toString(); let valStr = value.toString();
return value === 0 ? `${valStr}` : `${valStr}${options.unit}`; return value === 0 ? `${valStr}` : `${valStr}${options.unit}`;
@ -141,25 +150,15 @@ function generateEnumMembers(options: SpriteDtsOptions, sprite: GeneratedSprite,
return result; return result;
} }
export async function generateSpriteDts(options: SpriteDtsOptions, moduleName: string, sprite: GeneratedSprite, cssClassPrefix: string, modulePrefix: string, sourceDirectory: string) { export async function generateSpriteDts(options: SpriteDtsOptions, moduleName: string, sprite: GeneratedSprite, cssClassPrefix: string, modulePrefix: string) {
const headerLines = [];
const lines = []; const lines = [];
headerLines.push(`/*`);
headerLines.push(` * DO NOT MODIFY THIS FILE!`);
headerLines.push(` *`);
headerLines.push(` * This file has been auto generated by the svg-sprite generator.`);
headerLines.push(` * Sprite source directory: ${sourceDirectory}`);
headerLines.push(` * Sprite count: ${sprite.entries.length}`);
headerLines.push(` */`);
headerLines.push(``);
{ {
let union = ""; let union = "";
for(const file of sprite.entries) for(const file of sprite.entries)
union += ` | "${cssClassPrefix}${file.name}"`; union += ` | "${cssClassPrefix}${file.name}"`;
lines.push(`export type ${options.classUnionName} = ${union.substring(3)};`); lines.push(`export type ${options.classUnionName} = ${union.substr(3)};`);
} }
lines.push(``); lines.push(``);
@ -195,13 +194,12 @@ export async function generateSpriteDts(options: SpriteDtsOptions, moduleName: s
if(options.module) { if(options.module) {
let result = ""; let result = "";
result += headerLines.join("\n");
result += `declare module "${modulePrefix}${moduleName}" {\n`; result += `declare module "${modulePrefix}${moduleName}" {\n`;
result += lines.map(e => " " + e).join("\n"); result += lines.map(e => " " + e).join("\n");
result += `\n}`; result += `\n}`;
return result; return result;
} else { } else {
return headerLines.join("\n") + lines.join("\n"); return lines.join("\n");
} }
} }
@ -215,22 +213,24 @@ export async function generateSpriteJs(options: SpriteDtsOptions, sprite: Genera
lines.push(`EnumClassList[EnumClassList["${key}"] = "${members[key]}"] = "${key}";`); lines.push(`EnumClassList[EnumClassList["${key}"] = "${members[key]}"] = "${key}";`);
} }
lines.push(``); {
lines.push(`let SpriteEntries = [`); lines.push(``);
for(const entry of sprite.entries) { lines.push(`let SpriteEntries = [`);
lines.push(` Object.freeze({`); for(const entry of sprite.entries) {
lines.push(` id: "${entry.name}",`); lines.push(` Object.freeze({`);
lines.push(` className: "${cssClassPrefix}${entry.name}",`); lines.push(` id: "${entry.name}",`);
lines.push(` className: "${cssClassPrefix}${entry.name}",`);
lines.push(` width: ${entry.bounds.w},`); lines.push(` width: ${entry.bounds.w},`);
lines.push(` height: ${entry.bounds.h},`); lines.push(` height: ${entry.bounds.h},`);
lines.push(` xOffset: ${entry.bounds.x},`); lines.push(` xOffset: ${entry.bounds.x},`);
lines.push(` yOffset: ${entry.bounds.y},`); lines.push(` yOffset: ${entry.bounds.y},`);
lines.push(` }),`); lines.push(` }),`);
}
lines.push(`];`);
} }
lines.push(`];`);
lines.push(``); lines.push(``);
lines.push(`let SpriteUrl = decodeURIComponent("${encodeURIComponent(publicUrl)}");`); lines.push(`let SpriteUrl = decodeURIComponent("${encodeURIComponent(publicUrl)}");`);
@ -239,13 +239,13 @@ export async function generateSpriteJs(options: SpriteDtsOptions, sprite: Genera
lines.push(`let ClassList = [${sprite.entries.map(e => `"${cssClassPrefix}${e.name}", `)}];`); lines.push(`let ClassList = [${sprite.entries.map(e => `"${cssClassPrefix}${e.name}", `)}];`);
lines.push(``); lines.push(``);
lines.push(`Object.defineProperty(module.exports, "__esModule", { value: true });`); lines.push(`Object.defineProperty(exports, "__esModule", { value: true });`);
lines.push(`module.exports.${options.enumName} = Object.freeze(EnumClassList);`); lines.push(`exports.${options.enumName} = Object.freeze(EnumClassList);`);
lines.push(`module.exports.spriteUrl = SpriteUrl;`); lines.push(`exports.spriteUrl = SpriteUrl;`);
lines.push(`module.exports.classList = Object.freeze(ClassList);`); lines.push(`exports.classList = Object.freeze(ClassList);`);
lines.push(`module.exports.spriteEntries = Object.freeze(SpriteEntries);`); lines.push(`exports.spriteEntries = Object.freeze(SpriteEntries);`);
lines.push(`module.exports.spriteWidth = ${sprite.width};`); lines.push(`exports.spriteWidth = ${sprite.width};`);
lines.push(`module.exports.spriteHeight = ${sprite.height};`); lines.push(`exports.spriteHeight = ${sprite.height};`);
return lines.join("\n"); return lines.join("\n");
} }
@ -267,25 +267,17 @@ export async function generateSprite(files: string[]) : Promise<GeneratedSprite>
svg.data = XMLParser((await fs.readFile(file)).toString()); svg.data = XMLParser((await fs.readFile(file)).toString());
svg.name = path.basename(file, path.extname(file)); svg.name = path.basename(file, path.extname(file));
if(!svg.data.root) {
console.warn("Missing svg root element for %s. Skipping file.", file);
continue;
}
if(svg.data.root.name !== "svg") { if(svg.data.root.name !== "svg") {
console.warn("invalid svg root attribute for " + file + " (" + svg.data.root.name + ")"); console.warn("invalid svg root attribute for " + file + " (" + svg.data.root.name + ")");
continue; continue;
} }
const rootAttributes = svg.data.root.attributes; const rootAttributes = svg.data.root.attributes;
const [ /* xOff */, /* yOff */, width, height ] = rootAttributes["viewBox"].split(" ").map(parseFloat); const [ xOff, yOff, width, height ] = rootAttributes["viewBox"].split(" ").map(parseFloat);
if(isNaN(width) || isNaN(height)) { if(isNaN(width) || isNaN(height)) {
console.warn("Skipping SVG %s because of invalid bounds (Parsed: %d x %d, Values: %o).", file, width, height, rootAttributes["viewBox"].split(" ")); console.warn("Skipping SVG %s because of invalid bounds (Parsed: %d x %d, Values: %o).", file, width, height, rootAttributes["viewBox"].split(" "));
continue; continue;
} else if(Math.floor(width) !== width || Math.floor(height) !== height) {
console.warn("Skipping SVG %s because of an non interger height/width (%fx%f)", file, width, height);
continue;
} }
svg.bounds = { svg.bounds = {
@ -299,8 +291,13 @@ export async function generateSprite(files: string[]) : Promise<GeneratedSprite>
result.entries.push(svg); result.entries.push(svg);
} }
/* take the element height/with divided by two since that's a good number to work with */
//const svgSpaceWidth = result.elementWidth / 2;
//const svgSpaceHeight = result.elementHeight / 2;
//result.entries.forEach(e => { e.bounds.w += svgSpaceWidth; e.bounds.h += svgSpaceHeight });
const spriteDim = potpack(result.entries.map(e => e.bounds)); const spriteDim = potpack(result.entries.map(e => e.bounds));
//result.entries.forEach(e => { e.bounds.w -= svgSpaceWidth; e.bounds.h -= svgSpaceHeight });
result.width = spriteDim.w; result.width = spriteDim.w;
result.height = spriteDim.h; result.height = spriteDim.h;

4
plugin/index.ts
View file

@ -1,5 +1,5 @@
import * as Generator from "./generator"; import * as Generator from "./Generator";
import { SpriteGenerator, Options as PluginOptions } from "./plugin"; import { SpriteGenerator, Options as PluginOptions } from "./Plugin";
export type Sprite = Generator.GeneratedSprite; export type Sprite = Generator.GeneratedSprite;
export type DtsOptions = Generator.SpriteDtsOptions; export type DtsOptions = Generator.SpriteDtsOptions;

161
plugin/plugin.ts
View file

@ -1,7 +1,7 @@
import * as webpack from "webpack";
import * as path from "path"; import * as path from "path";
import * as SystemFs from "fs-extra"; import * as fs from "fs-extra";
import sha1 from "sha1"; import * as sha1 from "sha1";
import webpack, {Compiler, Module, RuntimeGlobals} from "webpack";
import { import {
GeneratedSprite, GeneratedSprite,
@ -11,19 +11,17 @@ import {
SpriteCssOptions, SpriteCssOptions,
SpriteDtsOptions SpriteDtsOptions
} from "./generator"; } from "./generator";
import Compilation = webpack.Compilation;
const { RawSource } = require("webpack-sources");
export interface Options { export interface Options {
modulePrefix?: string, /* defaults to svg-sprites/ */ modulePrefix?: string, /* defaults to svg-sprites/ */
dtsOutputFolder: string, dtsOutputFolder: string,
configurations: { configurations: {
[key: string] : SvgSpriteConfiguration [key: string] : SvgSpriteConfiguration
}, }
publicPath?: string,
} }
const Module = require("webpack/lib/Module");
const { RawSource } = require("webpack-sources");
interface SvgSpriteConfiguration { interface SvgSpriteConfiguration {
folder: string; folder: string;
@ -33,120 +31,78 @@ interface SvgSpriteConfiguration {
cssOptions: SpriteCssOptions[]; cssOptions: SpriteCssOptions[];
} }
const TYPES = new Set(["javascript"]);
const RUNTIME_REQUIREMENTS = new Set([
RuntimeGlobals.module
]);
class SvgSpriteModule extends Module { class SvgSpriteModule extends Module {
private readonly pluginConfig: Options; private readonly pluginConfig: Options;
private readonly configName: string; private readonly configName: string;
private readonly config: SvgSpriteConfiguration; private readonly config: SvgSpriteConfiguration;
private sprite: GeneratedSprite; private sprite: GeneratedSprite;
private spriteSvg: string; private spriteSvg: string;
private spriteCss: string; private spriteCss: string;
private spriteJs: string; private spriteJs: string;
private spriteAssetName: string; private spriteAssetName: string;
private spriteAssetUrl: string; private spriteAssetUrl: string;
constructor(context: string, pluginConfig: Options, configName: string, config: SvgSpriteConfiguration) { constructor(context: string, pluginConfig: Options, configName: string, config: SvgSpriteConfiguration) {
super("javascript/dynamic", null); super("javascript/dynamic", context);
this.context = context;
this.pluginConfig = pluginConfig; this.pluginConfig = pluginConfig;
this.configName = configName; this.configName = configName;
this.config = config; this.config = config;
this.buildInfo = {};
this.clearDependenciesAndBlocks();
}
getSourceTypes() {
return TYPES;
} }
identifier() { identifier() {
return this.pluginConfig.modulePrefix + this.configName;
}
readableIdentifier() {
return `SVG sprite ` + this.configName; return `SVG sprite ` + this.configName;
} }
libIdent() { readableIdentifier(requestShortener) {
return this.pluginConfig.modulePrefix + this.configName; return `SVG sprite ` + this.configName;
} }
needBuild(context, callback) { needRebuild() {
context.fileSystemInfo.getContextHash(this.config.folder, (error, hash) => { return false;
if(error) {
callback(error);
return;
}
const needBuild = this.buildMeta?.directoryHash !== hash;
callback(null, needBuild);
})
} }
build(options, compilation: Compilation, resolver, fs, callback) { build(options, compilation, resolver, fs_, callback) {
this.buildAsync(options, compilation).then(() => { console.info("Building SVG sprite for configuration %s", this.configName);
callback();
}).catch(error => {
callback(error);
});
}
private async buildAsync(options_, compilation: Compilation) { this.built = true;
this.buildMeta = { this.buildMeta = {
async: false, async: false,
exportsType: undefined exportsType: undefined
}; };
this.buildInfo = {};
this.buildInfo = {
cacheable: true,
assets: {},
};
if(this.spriteAssetName) { if(this.spriteAssetName) {
delete compilation.assets[this.spriteAssetName]; delete compilation.assets[this.spriteAssetName];
} }
this.buildMeta.directoryHash = await new Promise((resolve, reject) => { (async () => {
compilation.fileSystemInfo.getContextHash(this.config.folder, (err, hash) => { const files = (await fs.readdir(this.config.folder)).map(e => path.join(this.config.folder, e));
if(err) { this.sprite = await generateSprite(files);
reject(err);
} else { this.spriteSvg = await generateSpriteSvg(this.sprite);
resolve(hash); this.spriteAssetName = "sprite-" + sha1(this.spriteSvg).substr(-20) + ".svg";
} this.spriteAssetUrl = (compilation.options.output.publicPath || "") + this.spriteAssetName;
});
compilation.assets[this.spriteAssetName] = new RawSource(this.spriteSvg);
this.spriteCss = "";
for(const cssOption of this.config.cssOptions) {
this.spriteCss += await generateSpriteCss(cssOption, this.config.cssClassPrefix, this.sprite, this.spriteAssetUrl);
}
this.spriteJs = await generateSpriteJs(this.config.dtsOptions, this.sprite, this.spriteAssetUrl, this.config.cssClassPrefix);
const dtsContent = await generateSpriteDts(this.config.dtsOptions, this.configName, this.sprite, this.config.cssClassPrefix, this.pluginConfig.modulePrefix);
await fs.writeFile(path.join(this.pluginConfig.dtsOutputFolder, this.configName + ".d.ts"), dtsContent);
})().then(() => {
callback();
}).catch(error => {
console.error(error);
callback("failed to generate sprite");
}); });
compilation.logger.info("Building SVG sprite for configuration %s (Hash: %s).", this.configName, this.buildMeta.directoryHash);
const files = await SystemFs.readdir(this.config.folder);
this.sprite = await generateSprite(files.map(file => path.join(this.config.folder, file)));
this.spriteSvg = await generateSpriteSvg(this.sprite);
this.spriteAssetName = "sprite-" + sha1(this.spriteSvg).substr(-20) + ".svg";
this.spriteAssetUrl = (this.pluginConfig.publicPath || "") + this.spriteAssetName;
this.buildInfo.assets[this.spriteAssetName] = new RawSource(this.spriteSvg);
this.spriteCss = "";
for(const cssOption of this.config.cssOptions) {
this.spriteCss += await generateSpriteCss(cssOption, this.config.cssClassPrefix, this.sprite, this.spriteAssetUrl);
}
this.spriteJs = await generateSpriteJs(this.config.dtsOptions, this.sprite, this.spriteAssetUrl, this.config.cssClassPrefix);
const dtsContent = await generateSpriteDts(this.config.dtsOptions, this.configName, this.sprite, this.config.cssClassPrefix, this.pluginConfig.modulePrefix, this.config.folder);
await SystemFs.writeFile(path.join(this.pluginConfig.dtsOutputFolder, this.configName + ".d.ts"), dtsContent);
compilation.logger.info("SVG sprite configuration %s contains %d/%d sprites", this.configName, this.sprite.entries.length, files.length);
} }
codeGeneration(context) { source() {
const sources = new Map();
const encodedCss = this.spriteCss const encodedCss = this.spriteCss
.replace(/%/g, "%25") .replace(/%/g, "%25")
.replace(/"/g, "%22") .replace(/"/g, "%22")
@ -160,9 +116,7 @@ class SvgSpriteModule extends Module {
lines.push(``); lines.push(``);
lines.push(`/* initialize typescript objects */`); lines.push(`/* initialize typescript objects */`);
lines.push(...this.spriteJs.split("\n")); lines.push(...this.spriteJs.split("\n"));
return new RawSource(lines.join("\n"));
sources.set("javascript", new RawSource(lines.join("\n")));
return { sources: sources, runtimeRequirements: RUNTIME_REQUIREMENTS };
} }
size() { size() {
@ -176,20 +130,8 @@ class SvgSpriteModule extends Module {
hash.update(this.spriteSvg || "none"); hash.update(this.spriteSvg || "none");
super.updateHash(hash, chunkGraph); super.updateHash(hash, chunkGraph);
} }
addReason(_requestModule, _dependency) { }
addCacheDependencies(
fileDependencies,
contextDependencies,
missingDependencies,
buildDependencies
) {
contextDependencies.add(this.config.folder);
}
} }
export class SpriteGenerator { export class SpriteGenerator {
readonly options: Options; readonly options: Options;
constructor(options: Options) { constructor(options: Options) {
@ -198,19 +140,20 @@ export class SpriteGenerator {
this.options.modulePrefix = this.options.modulePrefix || "svg-sprites/"; this.options.modulePrefix = this.options.modulePrefix || "svg-sprites/";
} }
apply(compiler: Compiler) { apply(compiler: webpack.Compiler) {
compiler.hooks.normalModuleFactory.tap("SpriteGenerator", normalModuleFactory => { compiler.hooks.thisCompilation.tap("SpriteGenerator", (compilation, { normalModuleFactory }) => {
normalModuleFactory.hooks.resolve.tap("SpriteGenerator", resolveData => { normalModuleFactory.hooks.factory.tap("SpriteGenerator", factory => (data, callback) => {
if(!resolveData.request.startsWith(this.options.modulePrefix)) { if(data.request.startsWith(this.options.modulePrefix)) {
const configName = data.request.substr(this.options.modulePrefix.length);
if(this.options.configurations[configName] === undefined) {
callback("Missing SVG configuration " + configName);
return;
}
callback(null, new SvgSpriteModule(data.request, this.options, configName, this.options.configurations[configName]));
return; return;
} }
const configName = resolveData.request.substring(this.options.modulePrefix.length); factory(data, callback);
if(!this.options.configurations[configName]) {
return;
}
return new SvgSpriteModule(resolveData.request, this.options, configName, this.options.configurations[configName]);
}); });
}); });
} }

3
readme.md
View file

@ -1,2 +1 @@
## SVG Sprite generator for webpack with typescript support # SVG Sprite generator for webpack with typescript support
An example usage could be found in the [demo](https://github.com/WolverinDEV/webpack-svg-sprites/tree/master/demo) folder.

3
tsconfig.json
View file

@ -5,8 +5,7 @@
"sourceMap": false, "sourceMap": false,
"declarationDir": "dist/ts", "declarationDir": "dist/ts",
"declarationMap": false, "declarationMap": false,
"declaration": true, "declaration": true
"esModuleInterop": true
}, },
"include": [ "include": [
"plugin" "plugin"

6
webpack.config.ts
View file

@ -1,9 +1,9 @@
import * as path from "path"; import * as path from "path";
import {Configuration} from "webpack"; import {Configuration} from "webpack";
import {CleanWebpackPlugin} from "clean-webpack-plugin"; import {CleanWebpackPlugin} from "clean-webpack-plugin";
import CopyWebpackPlugin from "copy-webpack-plugin"; import * as CopyWebpackPlugin from "copy-webpack-plugin";
export default { export = {
entry: "./plugin/index.ts", entry: "./plugin/index.ts",
module: { module: {
rules: [ rules: [
@ -51,7 +51,7 @@ export default {
target: "node", target: "node",
output: { output: {
path: process.env.OUTPUT_PATH || path.resolve(__dirname, "dist"), path: path.resolve(__dirname, "dist"),
filename: "plugin.js", filename: "plugin.js",
libraryTarget: "umd", libraryTarget: "umd",