initial commit
WolverinDEV
commit
010ffa869a
|
|
@ -0,0 +1,10 @@
|
|||
.idea/
|
||||
|
||||
dist
|
||||
node_modules
|
||||
|
||||
plugin/*.js
|
||||
plugin/*.js.map
|
||||
|
||||
webpack.config.js
|
||||
webpack.config.js.map
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
dist
|
||||
node_modules
|
||||
|
||||
app/*.js
|
||||
app/*.js.map
|
||||
|
|
@ -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);
|
||||
|
|
@ -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;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 992 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 876 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 709 B |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 506 B |
|
|
@ -0,0 +1,12 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"target": "es6",
|
||||
"sourceMap": true,
|
||||
"baseUrl": ".",
|
||||
"jsx": "react"
|
||||
},
|
||||
"include": [
|
||||
"app"
|
||||
]
|
||||
}
|
||||
|
|
@ -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;
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,31 @@
|
|||
{
|
||||
"name": "webpack-svg-sprite-generator",
|
||||
"version": "1.0.11",
|
||||
"description": "",
|
||||
"main": "plugin.js",
|
||||
"types": "ts/index.d.ts",
|
||||
"scripts": {
|
||||
"build": "webpack"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"@types/tapable": "^1.0.6",
|
||||
"@types/webpack": "^4.41.21",
|
||||
"change-case": "^4.1.1",
|
||||
"clean-webpack-plugin": "^3.0.0",
|
||||
"copy-webpack-plugin": "^6.0.3",
|
||||
"sha1": "^1.1.1",
|
||||
"ts-loader": "^8.0.2",
|
||||
"typescript": "^3.9.7",
|
||||
"webpack-cli": "^3.3.12",
|
||||
"xml-parser": "^1.2.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"path": "^0.12.7",
|
||||
"webpack": "^4.44.1",
|
||||
"fs-extra": "^9.0.1",
|
||||
"potpack": "^1.0.1"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,306 @@
|
|||
import * as fs from "fs-extra";
|
||||
import * as path from "path";
|
||||
import * as XMLParser from "xml-parser";
|
||||
import { pascalCase } from "change-case";
|
||||
|
||||
let potpack = require("potpack");
|
||||
if(typeof potpack !== "function" && potpack.default)
|
||||
potpack = potpack.default;
|
||||
|
||||
function generateAttributes(attributes: XMLParser.Attributes) {
|
||||
const keys = Object.keys(attributes);
|
||||
if(keys.length === 0) return "";
|
||||
|
||||
return Object.keys(attributes).map(e => ` ${e}="${attributes[e]}"`).join("");
|
||||
}
|
||||
|
||||
function jsNode2xml(indent: string, data: XMLParser.Node) {
|
||||
if(data.content && data.children.length)
|
||||
throw "invalid node";
|
||||
|
||||
const tagOpen = `<${data.name}${generateAttributes(data.attributes)}>`;
|
||||
const tagClose = `</${data.name}>`;
|
||||
|
||||
let content = data.children.length ? data.children.map(e => jsNode2xml(indent + " ", e)).join("\n") : data.content;
|
||||
if(content?.length !== 0)
|
||||
content = "\n" + content + "\n" + indent;
|
||||
|
||||
return (
|
||||
`${indent}${tagOpen}` +
|
||||
`${content}` +
|
||||
`${tagClose}`
|
||||
);
|
||||
}
|
||||
|
||||
interface SVGFile {
|
||||
bounds: {
|
||||
/* w & h required for potpack */
|
||||
w: number,
|
||||
h: number,
|
||||
|
||||
x: number,
|
||||
y: number
|
||||
},
|
||||
|
||||
name: string,
|
||||
data: XMLParser.Document
|
||||
}
|
||||
|
||||
export async function generateSpriteSvg(sprite: GeneratedSprite) {
|
||||
let result = "";
|
||||
result += `<?xml version="1.0" encoding="utf-8"?>\n`;
|
||||
result += `<!-- ${sprite.entries.length} icons packed -->\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) {
|
||||
const root = file.data.root;
|
||||
|
||||
delete root.attributes["xmlns"];
|
||||
delete root.attributes["xmlns:xlink"];
|
||||
|
||||
root.attributes["id"] = "client-" + file.name; /* appending the "client-" due to legacy reasons */
|
||||
root.attributes["x"] = file.bounds.x.toString();
|
||||
root.attributes["y"] = file.bounds.y.toString();
|
||||
|
||||
root.attributes["width"] = file.bounds.w.toString();
|
||||
root.attributes["height"] = file.bounds.h.toString();
|
||||
|
||||
result += jsNode2xml(" ", root) + "\n";
|
||||
}
|
||||
|
||||
result += "</svg>";
|
||||
return result;
|
||||
}
|
||||
|
||||
export interface SpriteCssOptions {
|
||||
selector: string;
|
||||
scale: number;
|
||||
unit: "px" | "em";
|
||||
}
|
||||
|
||||
export async function generateSpriteCss(options: SpriteCssOptions, classPrefix: string, sprite: GeneratedSprite, publicUrl: string) {
|
||||
const boundsMap = {};
|
||||
sprite.entries.forEach(e => {
|
||||
const key = e.bounds.w + " " + e.bounds.h;
|
||||
boundsMap[key] = (boundsMap[key] | 0) + 1;
|
||||
});
|
||||
const best = Object.keys(boundsMap).sort((a, b) => boundsMap[b] - boundsMap[a])[0];
|
||||
const [ defaultWidth, defaultHeight ] = best.split(" ").map(parseFloat);
|
||||
|
||||
const scaleX = options.unit === "px" ? options.scale : options.scale / defaultWidth;
|
||||
const scaleY = options.unit === "px" ? options.scale : options.scale / defaultHeight;
|
||||
|
||||
let result = "";
|
||||
result += `${options.selector}{`;
|
||||
result += `display:inline-block;`;
|
||||
result += `background:url("${publicUrl}") no-repeat;`;
|
||||
result += `background-size:${sprite.width * scaleX}${options.unit} ${sprite.height * scaleY}${options.unit};`;
|
||||
result += `height:${defaultHeight * scaleY}${options.unit};`;
|
||||
result += `width:${defaultWidth * scaleX}${options.unit}`;
|
||||
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) => {
|
||||
let valStr = value.toString();
|
||||
return value === 0 ? `${valStr}` : `${valStr}${options.unit}`;
|
||||
};
|
||||
for(const file of sprite.entries) {
|
||||
result += `${options.selector}.${classPrefix}${file.name}{`;
|
||||
result += `background-position:${unit(-file.bounds.x * scaleX)} ${unit(-file.bounds.y * scaleY)}`;
|
||||
|
||||
if(file.bounds.w !== defaultWidth || file.bounds.h !== defaultHeight) {
|
||||
result += ";"; /* from before */
|
||||
result += `background-size:${sprite.width * scaleX}${options.unit} ${sprite.height * scaleY}${options.unit};`;
|
||||
result += `width:${file.bounds.w * scaleY}${options.unit};`;
|
||||
result += `height:${file.bounds.h * scaleX}${options.unit}`;
|
||||
}
|
||||
|
||||
result += `}`;
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
|
||||
export interface SpriteDtsOptions {
|
||||
module: boolean;
|
||||
enumName: string;
|
||||
|
||||
classUnionName: string;
|
||||
}
|
||||
|
||||
function generateEnumMembers(options: SpriteDtsOptions, sprite: GeneratedSprite, cssClassPrefix: string) : { [key: string]: string } {
|
||||
const result = {};
|
||||
|
||||
for(const file of sprite.entries) {
|
||||
let name = file.name;
|
||||
name = name.replace(/[- ]/g, "_")
|
||||
.replace(/[^a-zA-Z0-9_]/g, "");
|
||||
name = pascalCase(name);
|
||||
|
||||
result[name] = cssClassPrefix + file.name;
|
||||
}
|
||||
|
||||
return result;
|
||||
}
|
||||
export async function generateSpriteDts(options: SpriteDtsOptions, moduleName: string, sprite: GeneratedSprite, cssClassPrefix: string, modulePrefix: string) {
|
||||
const lines = [];
|
||||
|
||||
{
|
||||
let union = "";
|
||||
for(const file of sprite.entries)
|
||||
union += ` | "${cssClassPrefix}${file.name}"`;
|
||||
|
||||
lines.push(`export type ${options.classUnionName} = ${union.substr(3)};`);
|
||||
}
|
||||
|
||||
lines.push(``);
|
||||
|
||||
{
|
||||
lines.push(`export enum ${options.enumName} {`);
|
||||
|
||||
const members = generateEnumMembers(options, sprite, cssClassPrefix);
|
||||
for(const key of Object.keys(members))
|
||||
lines.push(` ${key} = "${members[key]}",`);
|
||||
|
||||
lines.push("}");
|
||||
}
|
||||
//sprite.entries[0].bounds.
|
||||
|
||||
lines.push(``);
|
||||
lines.push(`export const spriteEntries: {`);
|
||||
lines.push(` id: string;`);
|
||||
lines.push(` className: string;`);
|
||||
lines.push(` width: number;`);
|
||||
lines.push(` height: number;`);
|
||||
lines.push(` xOffset: number;`);
|
||||
lines.push(` yOffset: number;`);
|
||||
lines.push(`}[];`);
|
||||
|
||||
lines.push(``);
|
||||
lines.push(`export const spriteUrl: string;`);
|
||||
lines.push(`export const classList: string[];`);
|
||||
|
||||
lines.push(``);
|
||||
lines.push(`export const spriteWidth: number;`);
|
||||
lines.push(`export const spriteHeight: number;`);
|
||||
|
||||
if(options.module) {
|
||||
let result = "";
|
||||
result += `declare module "${modulePrefix}${moduleName}" {\n`;
|
||||
result += lines.map(e => " " + e).join("\n");
|
||||
result += `\n}`;
|
||||
return result;
|
||||
} else {
|
||||
return lines.join("\n");
|
||||
}
|
||||
}
|
||||
|
||||
export async function generateSpriteJs(options: SpriteDtsOptions, sprite: GeneratedSprite, publicUrl: string, cssClassPrefix: string) {
|
||||
let lines = [];
|
||||
|
||||
{
|
||||
lines.push(`let EnumClassList = {};`);
|
||||
const members = generateEnumMembers(options, sprite, cssClassPrefix);
|
||||
for(const key of Object.keys(members))
|
||||
lines.push(`EnumClassList[EnumClassList["${key}"] = "${members[key]}"] = "${key}";`);
|
||||
}
|
||||
|
||||
{
|
||||
lines.push(``);
|
||||
lines.push(`let SpriteEntries = [`);
|
||||
for(const entry of sprite.entries) {
|
||||
lines.push(` Object.freeze({`);
|
||||
lines.push(` id: "${entry.name}",`);
|
||||
lines.push(` className: "${cssClassPrefix}${entry.name}",`);
|
||||
|
||||
lines.push(` width: ${entry.bounds.w},`);
|
||||
lines.push(` height: ${entry.bounds.h},`);
|
||||
|
||||
lines.push(` xOffset: ${entry.bounds.x},`);
|
||||
lines.push(` yOffset: ${entry.bounds.y},`);
|
||||
|
||||
lines.push(` }),`);
|
||||
}
|
||||
lines.push(`];`);
|
||||
}
|
||||
|
||||
lines.push(``);
|
||||
lines.push(`let SpriteUrl = decodeURIComponent("${encodeURIComponent(publicUrl)}");`);
|
||||
|
||||
lines.push(``);
|
||||
lines.push(`let ClassList = [${sprite.entries.map(e => `"${cssClassPrefix}${e.name}", `)}];`);
|
||||
|
||||
lines.push(``);
|
||||
lines.push(`Object.defineProperty(exports, "__esModule", { value: true });`);
|
||||
lines.push(`exports.${options.enumName} = Object.freeze(EnumClassList);`);
|
||||
lines.push(`exports.spriteUrl = SpriteUrl;`);
|
||||
lines.push(`exports.classList = Object.freeze(ClassList);`);
|
||||
lines.push(`exports.spriteEntries = Object.freeze(SpriteEntries);`);
|
||||
lines.push(`exports.spriteWidth = ${sprite.width};`);
|
||||
lines.push(`exports.spriteHeight = ${sprite.height};`);
|
||||
return lines.join("\n");
|
||||
}
|
||||
|
||||
export interface GeneratedSprite {
|
||||
width: number;
|
||||
height: number;
|
||||
|
||||
entries: SVGFile[];
|
||||
}
|
||||
|
||||
export async function generateSprite(files: string[]) : Promise<GeneratedSprite> {
|
||||
const result = {
|
||||
entries: [],
|
||||
} as GeneratedSprite;
|
||||
|
||||
for(const file of files) {
|
||||
const svg = {} as SVGFile;
|
||||
|
||||
svg.data = XMLParser((await fs.readFile(file)).toString());
|
||||
svg.name = path.basename(file, path.extname(file));
|
||||
|
||||
if(svg.data.root.name !== "svg") {
|
||||
console.warn("invalid svg root attribute for " + file + " (" + svg.data.root.name + ")");
|
||||
continue;
|
||||
}
|
||||
|
||||
const rootAttributes = svg.data.root.attributes;
|
||||
const [ xOff, yOff, width, height ] = rootAttributes["viewBox"].split(" ").map(parseFloat);
|
||||
|
||||
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(" "));
|
||||
continue;
|
||||
}
|
||||
|
||||
svg.bounds = {
|
||||
w: width,
|
||||
h: height,
|
||||
|
||||
x: undefined,
|
||||
y: undefined
|
||||
};
|
||||
|
||||
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));
|
||||
//result.entries.forEach(e => { e.bounds.w -= svgSpaceWidth; e.bounds.h -= svgSpaceHeight });
|
||||
|
||||
result.width = spriteDim.w;
|
||||
result.height = spriteDim.h;
|
||||
|
||||
return result;
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
import * as Generator from "./Generator";
|
||||
import { SpriteGenerator, Options as PluginOptions } from "./Plugin";
|
||||
|
||||
export type Sprite = Generator.GeneratedSprite;
|
||||
export type DtsOptions = Generator.SpriteDtsOptions;
|
||||
export type CssOptions = Generator.SpriteCssOptions;
|
||||
|
||||
export type Options = PluginOptions;
|
||||
export const Plugin = SpriteGenerator;
|
||||
|
|
@ -0,0 +1,160 @@
|
|||
import * as webpack from "webpack";
|
||||
import * as path from "path";
|
||||
import * as fs from "fs-extra";
|
||||
import * as sha1 from "sha1";
|
||||
|
||||
import {
|
||||
GeneratedSprite,
|
||||
generateSprite,
|
||||
generateSpriteCss, generateSpriteDts, generateSpriteJs,
|
||||
generateSpriteSvg,
|
||||
SpriteCssOptions,
|
||||
SpriteDtsOptions
|
||||
} from "./generator";
|
||||
|
||||
export interface Options {
|
||||
modulePrefix?: string, /* defaults to svg-sprites/ */
|
||||
dtsOutputFolder: string,
|
||||
configurations: {
|
||||
[key: string] : SvgSpriteConfiguration
|
||||
}
|
||||
}
|
||||
|
||||
const Module = require("webpack/lib/Module");
|
||||
const { RawSource } = require("webpack-sources");
|
||||
|
||||
interface SvgSpriteConfiguration {
|
||||
folder: string;
|
||||
cssClassPrefix: string;
|
||||
|
||||
dtsOptions: SpriteDtsOptions;
|
||||
cssOptions: SpriteCssOptions[];
|
||||
}
|
||||
|
||||
class SvgSpriteModule extends Module {
|
||||
private readonly pluginConfig: Options;
|
||||
private readonly configName: string;
|
||||
private readonly config: SvgSpriteConfiguration;
|
||||
private sprite: GeneratedSprite;
|
||||
private spriteSvg: string;
|
||||
private spriteCss: string;
|
||||
private spriteJs: string;
|
||||
private spriteAssetName: string;
|
||||
private spriteAssetUrl: string;
|
||||
|
||||
constructor(context: string, pluginConfig: Options, configName: string, config: SvgSpriteConfiguration) {
|
||||
super("javascript/dynamic", context);
|
||||
this.pluginConfig = pluginConfig;
|
||||
this.configName = configName;
|
||||
this.config = config;
|
||||
}
|
||||
|
||||
identifier() {
|
||||
return `SVG sprite ` + this.configName;
|
||||
}
|
||||
|
||||
readableIdentifier(requestShortener) {
|
||||
return `SVG sprite ` + this.configName;
|
||||
}
|
||||
|
||||
needRebuild() {
|
||||
return false;
|
||||
}
|
||||
|
||||
build(options, compilation, resolver, fs_, callback) {
|
||||
console.info("Building SVG sprite for configuration %s", this.configName);
|
||||
|
||||
this.built = true;
|
||||
this.buildMeta = {
|
||||
async: false,
|
||||
exportsType: undefined
|
||||
};
|
||||
this.buildInfo = {};
|
||||
|
||||
if(this.spriteAssetName) {
|
||||
delete compilation.assets[this.spriteAssetName];
|
||||
}
|
||||
|
||||
(async () => {
|
||||
const files = (await fs.readdir(this.config.folder)).map(e => path.join(this.config.folder, e));
|
||||
this.sprite = await generateSprite(files);
|
||||
|
||||
this.spriteSvg = await generateSpriteSvg(this.sprite);
|
||||
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");
|
||||
});
|
||||
}
|
||||
|
||||
source() {
|
||||
const encodedCss = this.spriteCss
|
||||
.replace(/%/g, "%25")
|
||||
.replace(/"/g, "%22")
|
||||
.replace(/\n/g, "%0A");
|
||||
|
||||
let lines = [];
|
||||
lines.push(`/* initialize css */`);
|
||||
lines.push(`var element = document.createElement("style");`);
|
||||
lines.push(`element.innerText = decodeURIComponent("${encodedCss}");`);
|
||||
lines.push(`document.head.append(element);`);
|
||||
lines.push(``);
|
||||
lines.push(`/* initialize typescript objects */`);
|
||||
lines.push(...this.spriteJs.split("\n"));
|
||||
return new RawSource(lines.join("\n"));
|
||||
}
|
||||
|
||||
size() {
|
||||
return 12;
|
||||
}
|
||||
|
||||
updateHash(hash, chunkGraph) {
|
||||
hash.update("svg-sprite module");
|
||||
hash.update(this.configName || "none");
|
||||
hash.update(this.spriteCss || "none");
|
||||
hash.update(this.spriteSvg || "none");
|
||||
super.updateHash(hash, chunkGraph);
|
||||
}
|
||||
}
|
||||
|
||||
export class SpriteGenerator {
|
||||
readonly options: Options;
|
||||
constructor(options: Options) {
|
||||
this.options = options || {} as any;
|
||||
this.options.configurations = this.options.configurations || {};
|
||||
this.options.modulePrefix = this.options.modulePrefix || "svg-sprites/";
|
||||
}
|
||||
|
||||
apply(compiler: webpack.Compiler) {
|
||||
compiler.hooks.thisCompilation.tap("SpriteGenerator", (compilation, { normalModuleFactory }) => {
|
||||
normalModuleFactory.hooks.factory.tap("SpriteGenerator", factory => (data, callback) => {
|
||||
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;
|
||||
}
|
||||
|
||||
factory(data, callback);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
# SVG Sprite generator for webpack with typescript support
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"module": "commonjs",
|
||||
"target": "es6",
|
||||
"sourceMap": false,
|
||||
"declarationDir": "dist/ts",
|
||||
"declarationMap": false,
|
||||
"declaration": true
|
||||
},
|
||||
"include": [
|
||||
"plugin"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
import * as path from "path";
|
||||
import {Configuration} from "webpack";
|
||||
import {CleanWebpackPlugin} from "clean-webpack-plugin";
|
||||
import * as CopyWebpackPlugin from "copy-webpack-plugin";
|
||||
|
||||
export = {
|
||||
entry: "./plugin/index.ts",
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.ts$/,
|
||||
loader: "ts-loader"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new CleanWebpackPlugin(),
|
||||
new CopyWebpackPlugin({
|
||||
patterns: [
|
||||
{
|
||||
from: path.join(__dirname, "package.json"),
|
||||
to: path.join(__dirname, "dist")
|
||||
},
|
||||
{
|
||||
from: path.join(__dirname, "package-lock.json"),
|
||||
to: path.join(__dirname, "dist")
|
||||
}
|
||||
]
|
||||
})
|
||||
],
|
||||
|
||||
mode: process.env.NODE_ENV === "development" ? "development" : "production",
|
||||
|
||||
resolve: {
|
||||
extensions: [".ts", ".tsx", ".js"]
|
||||
},
|
||||
|
||||
externals: [
|
||||
(_, request, callback) => {
|
||||
if(request.match(/^webpack(-sources)?(\/.*|$).*/))
|
||||
callback(null, "commonjs " + request);
|
||||
else
|
||||
callback();
|
||||
},
|
||||
{
|
||||
"fs-extra": "commonjs fs-extra",
|
||||
"path": "commonjs path"
|
||||
}
|
||||
],
|
||||
|
||||
target: "node",
|
||||
output: {
|
||||
path: path.resolve(__dirname, "dist"),
|
||||
filename: "plugin.js",
|
||||
|
||||
libraryTarget: "umd",
|
||||
library: "svg-sprite-plugin"
|
||||
}
|
||||
} as Configuration;
|
||||
Loading…
Reference in New Issue