Add Icons and ToolbarButtons
|
@ -6,10 +6,37 @@ module.exports = {
|
|||
webpackFinal: async config => {
|
||||
config.module.rules.push({
|
||||
test: /\.scss$/,
|
||||
use: ["style-loader", "css-loader", "sass-loader"],
|
||||
use: [
|
||||
"style-loader",
|
||||
{
|
||||
loader: "css-loader",
|
||||
options: {
|
||||
importLoaders: "1",
|
||||
localIdentName: "[name]__[local]___[hash:base64:5]",
|
||||
modules: true
|
||||
}
|
||||
},
|
||||
"sass-loader"
|
||||
],
|
||||
include: path.resolve(__dirname, "..", "src")
|
||||
});
|
||||
|
||||
const fileLoaderRule = config.module.rules.find(rule => rule.test.test(".svg"));
|
||||
fileLoaderRule.exclude = /\.svg$/;
|
||||
config.module.rules.push({
|
||||
test: /\.svg$/,
|
||||
use: [
|
||||
{
|
||||
loader: "@svgr/webpack",
|
||||
options: {
|
||||
replaceAttrValues: { "#000": "{props.color}" },
|
||||
template: require("../src/react-components/icons/IconTemplate")
|
||||
}
|
||||
},
|
||||
"url-loader"
|
||||
]
|
||||
});
|
||||
|
||||
return config;
|
||||
}
|
||||
};
|
||||
|
|
|
@ -12979,9 +12979,9 @@
|
|||
}
|
||||
},
|
||||
"caniuse-lite": {
|
||||
"version": "1.0.30001114",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001114.tgz",
|
||||
"integrity": "sha512-ml/zTsfNBM+T1+mjglWRPgVsu2L76GAaADKX5f4t0pbhttEp0WMawJsHDYlFkVZkoA+89uvBRrVrEE4oqenzXQ==",
|
||||
"version": "1.0.30001116",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001116.tgz",
|
||||
"integrity": "sha512-f2lcYnmAI5Mst9+g0nkMIznFGsArRmZ0qU+dnq8l91hymdc2J3SFbiPhOJEeDqC1vtE8nc1qNQyklzB8veJefQ==",
|
||||
"dev": true
|
||||
},
|
||||
"convert-source-map": {
|
||||
|
@ -13003,9 +13003,9 @@
|
|||
}
|
||||
},
|
||||
"electron-to-chromium": {
|
||||
"version": "1.3.533",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.533.tgz",
|
||||
"integrity": "sha512-YqAL+NXOzjBnpY+dcOKDlZybJDCOzgsq4koW3fvyty/ldTmsb4QazZpOWmVvZ2m0t5jbBf7L0lIGU3BUipwG+A==",
|
||||
"version": "1.3.536",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.536.tgz",
|
||||
"integrity": "sha512-aU16nvH8/zNNeFIQ7H2SKRQlJ/srw7mCn/JDj2ImWUA7Lk2+3zJFpDGJNP2qRxPAZsC+qgnlgNTYIvT6EOdJFQ==",
|
||||
"dev": true
|
||||
},
|
||||
"emojis-list": {
|
||||
|
|
|
@ -128,6 +128,7 @@
|
|||
"@storybook/addon-essentials": "^6.0.12",
|
||||
"@storybook/addon-links": "^6.0.12",
|
||||
"@storybook/react": "^6.0.12",
|
||||
"@svgr/webpack": "^5.4.0",
|
||||
"acorn": "^6.4.1",
|
||||
"ava": "^1.4.1",
|
||||
"babel-eslint": "^10.0.1",
|
||||
|
|
|
@ -0,0 +1,4 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.5 8.51574V8.28136C7.5 7.70168 7.89062 7.22668 8.44687 7.08644L15.2668 5.263C15.3824 5.23208 15.5035 5.22811 15.6209 5.2514C15.7382 5.2747 15.8487 5.32464 15.9437 5.39737C16.0387 5.47011 16.1157 5.56369 16.1688 5.6709C16.2219 5.77811 16.2497 5.89609 16.25 6.01574V6.87511" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M16.25 11.5585V14.6835C16.25 15.2268 15.9012 15.6831 15.3906 15.8554L14.5312 16.1679C13.5195 16.5085 12.5 15.7608 12.5 14.6835C12.4977 14.4067 12.5835 14.1364 12.745 13.9117C12.9065 13.687 13.1354 13.5195 13.3984 13.4335L15.3906 12.7245C15.9012 12.5526 16.25 12.1018 16.25 11.5585ZM16.25 11.5585V2.26395C16.2497 2.20414 16.2357 2.1452 16.2091 2.09166C16.1824 2.03812 16.1438 1.99142 16.0963 1.95515C16.0487 1.91888 15.9935 1.89402 15.9348 1.88247C15.8761 1.87092 15.8156 1.87301 15.7578 1.88856L7.96875 3.9827C7.8329 4.02107 7.71343 4.10303 7.62873 4.21596C7.54403 4.32889 7.4988 4.46654 7.5 4.6077V13.4358C7.5 13.9792 7.15117 14.4358 6.64062 14.6077L4.60937 15.3108C4.06719 15.4936 3.75 15.9835 3.75 16.5608C3.75 17.6382 4.78594 18.3792 5.78125 18.0452L6.64062 17.7327C7.15117 17.5608 7.5 17.1046 7.5 16.5608V13.4358" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 1.3 KiB |
|
@ -0,0 +1,11 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0)">
|
||||
<path d="M9.6875 3.74939C10.5504 3.74939 11.25 3.04983 11.25 2.18689C11.25 1.32394 10.5504 0.62439 9.6875 0.62439C8.82455 0.62439 8.125 1.32394 8.125 2.18689C8.125 3.04983 8.82455 3.74939 9.6875 3.74939Z" stroke="black" stroke-width="1.5" stroke-miterlimit="10"/>
|
||||
<path d="M7.78516 11.5474L6.59766 18.2739C6.57631 18.3953 6.57908 18.5196 6.60581 18.6398C6.63255 18.7601 6.68272 18.8739 6.75346 18.9748C6.8242 19.0756 6.91413 19.1615 7.01809 19.2276C7.12206 19.2937 7.23803 19.3386 7.35937 19.3599C7.48025 19.3814 7.6042 19.3787 7.72403 19.3519C7.84386 19.3252 7.9572 19.2749 8.05747 19.2041C8.15775 19.1333 8.24297 19.0432 8.3082 18.9392C8.37344 18.8352 8.41738 18.7193 8.4375 18.5981L9.25781 13.9146V13.9224C9.25781 13.9224 9.46094 12.6528 9.94141 12.6528H10.0625C10.5508 12.6528 10.7461 13.9224 10.7461 13.9224V13.9185L11.5664 18.6021C11.6099 18.846 11.7486 19.0627 11.9519 19.2045C12.1551 19.3462 12.4064 19.4014 12.6504 19.3579C12.8944 19.3144 13.1111 19.1757 13.2528 18.9725C13.3946 18.7692 13.4498 18.5179 13.4062 18.2739L12.2187 11.5474L12.0273 10.3872C11.9141 9.68018 11.8633 8.52783 12.0469 8.05518C12.2031 7.64893 12.5988 7.50049 12.9531 7.50049H16.5625C16.8111 7.50049 17.0496 7.40172 17.2254 7.2259C17.4012 7.05009 17.5 6.81163 17.5 6.56299C17.5 6.31435 17.4012 6.07589 17.2254 5.90008C17.0496 5.72426 16.8111 5.62549 16.5625 5.62549H3.4375C3.18886 5.62549 2.9504 5.72426 2.77459 5.90008C2.59877 6.07589 2.5 6.31435 2.5 6.56299C2.5 6.81163 2.59877 7.05009 2.77459 7.2259C2.9504 7.40172 3.18886 7.50049 3.4375 7.50049H7.05078C7.41133 7.50049 7.80078 7.64893 7.95703 8.05518C8.14062 8.52783 8.08984 9.68018 7.97656 10.3872L7.78516 11.5474Z" stroke="black" stroke-width="1.5" stroke-miterlimit="10"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="20" height="20" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 1.9 KiB |
|
@ -0,0 +1,5 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.693 5.80745L12.6531 4.16448C12.434 3.90901 12.1336 3.74963 11.7969 3.74963H8.20312C7.86641 3.74963 7.56602 3.90901 7.34687 4.16448L6.30703 5.80745C6.08789 6.0633 5.80547 6.24963 5.46875 6.24963H3.125C2.79348 6.24963 2.47554 6.38133 2.24112 6.61575C2.0067 6.85017 1.875 7.16811 1.875 7.49963V14.9996C1.875 15.3312 2.0067 15.6491 2.24112 15.8835C2.47554 16.1179 2.79348 16.2496 3.125 16.2496H16.875C17.2065 16.2496 17.5245 16.1179 17.7589 15.8835C17.9933 15.6491 18.125 15.3312 18.125 14.9996V7.49963C18.125 7.16811 17.9933 6.85017 17.7589 6.61575C17.5245 6.38133 17.2065 6.24963 16.875 6.24963H14.5703C14.2324 6.24963 13.9121 6.0633 13.693 5.80745Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 13.7491C11.7259 13.7491 13.125 12.35 13.125 10.6241C13.125 8.89825 11.7259 7.49915 10 7.49915C8.27411 7.49915 6.875 8.89825 6.875 10.6241C6.875 12.35 8.27411 13.7491 10 13.7491Z" stroke="black" stroke-width="1.5" stroke-miterlimit="10"/>
|
||||
<path d="M4.84439 6.17148V5.31152H3.90625V6.17148" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 1.2 KiB |
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.82806 7.42388L9.28821 13.7958C9.37623 13.8984 9.4854 13.9808 9.60825 14.0373C9.7311 14.0938 9.86472 14.123 9.99993 14.123C10.1351 14.123 10.2688 14.0938 10.3916 14.0373C10.5145 13.9808 10.6236 13.8984 10.7117 13.7958L16.1718 7.42388C16.6929 6.81567 16.2609 5.87622 15.4601 5.87622H4.53822C3.73744 5.87622 3.3054 6.81567 3.82806 7.42388Z" fill="black"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 468 B |
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.41762 14.844C3.4641 14.6729 3.36137 14.435 3.26332 14.2635C3.23279 14.2124 3.19967 14.1628 3.1641 14.1151C2.32319 12.8398 1.87498 11.3458 1.87504 9.81821C1.86137 5.43345 5.4973 1.87524 9.99339 1.87524C13.9145 1.87524 17.1875 4.59165 17.9524 8.19751C18.067 8.73212 18.1248 9.27732 18.125 9.82407C18.125 14.2151 14.6293 17.8291 10.1332 17.8291C9.41839 17.8291 8.45355 17.6495 7.92738 17.5022C7.40121 17.3549 6.87582 17.1596 6.74027 17.1073C6.60164 17.054 6.45441 17.0266 6.3059 17.0264C6.14367 17.0258 5.98301 17.0581 5.83363 17.1213L3.18402 18.0776C3.12597 18.1026 3.06447 18.1187 3.0016 18.1252C2.95199 18.1251 2.9029 18.1151 2.85718 18.0958C2.81146 18.0766 2.77001 18.0485 2.73524 18.0131C2.70047 17.9777 2.67307 17.9357 2.65462 17.8897C2.63618 17.8436 2.62705 17.7944 2.62777 17.7448C2.63103 17.7012 2.63889 17.6581 2.65121 17.6163L3.41762 14.844Z" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 1.0 KiB |
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14 3L7 10L14 17" stroke="black" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 214 B |
|
@ -0,0 +1,4 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17 17L3 3" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M17 3L3 17" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 307 B |
|
@ -0,0 +1,8 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.375 4.37537L5.15625 16.8754C5.19336 17.5976 5.71875 18.1254 6.40625 18.1254H13.5937C14.284 18.1254 14.7996 17.5976 14.8437 16.8754L15.625 4.37537" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M3.125 4.37537H16.875" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
|
||||
<path d="M7.5 4.37525V2.81275C7.49964 2.68953 7.52365 2.56746 7.57063 2.45356C7.61762 2.33965 7.68666 2.23616 7.77379 2.14903C7.86091 2.0619 7.96441 1.99286 8.07831 1.94588C8.19222 1.89889 8.31429 1.87489 8.4375 1.87525H11.5625C11.6857 1.87489 11.8078 1.89889 11.9217 1.94588C12.0356 1.99286 12.1391 2.0619 12.2262 2.14903C12.3133 2.23616 12.3824 2.33965 12.4294 2.45356C12.4764 2.56746 12.5004 2.68953 12.5 2.81275V4.37525" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 6.87561V15.6256" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M7.1875 6.87561L7.5 15.6256" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12.8125 6.87561L12.5 15.6256" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 1.3 KiB |
|
@ -0,0 +1,6 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.1215 3H2.97862C2.32771 3 1.80005 3.52766 1.80005 4.17857V13.6071C1.80005 14.258 2.32771 14.7857 2.97862 14.7857H17.1215C17.7724 14.7857 18.3 14.258 18.3 13.6071V4.17857C18.3 3.52766 17.7724 3 17.1215 3Z" stroke="black" stroke-linejoin="round"/>
|
||||
<path d="M11.8179 17.1425L11.5233 14.7854H8.57687L8.28223 17.1425H11.8179Z" fill="black"/>
|
||||
<path d="M14.175 17.1423H5.92505" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M1.80005 11.8387V13.6066C1.80092 13.9189 1.92537 14.2182 2.14621 14.439C2.36705 14.6598 2.66631 14.7843 2.97862 14.7852H17.1215C17.4338 14.7843 17.7331 14.6598 17.9539 14.439C18.1747 14.2182 18.2992 13.9189 18.3 13.6066V11.8387H1.80005ZM10.05 14.1959C9.9335 14.1959 9.81957 14.1613 9.72266 14.0966C9.62575 14.0318 9.55022 13.9398 9.50562 13.8321C9.46102 13.7244 9.44935 13.6059 9.47209 13.4916C9.49482 13.3773 9.55095 13.2723 9.63336 13.1899C9.71577 13.1075 9.82078 13.0514 9.93509 13.0286C10.0494 13.0059 10.1679 13.0176 10.2756 13.0622C10.3832 13.1068 10.4753 13.1823 10.54 13.2792C10.6048 13.3761 10.6393 13.4901 10.6393 13.6066C10.6393 13.7629 10.5772 13.9128 10.4667 14.0233C10.3562 14.1338 10.2063 14.1959 10.05 14.1959Z" fill="black"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 1.3 KiB |
|
@ -0,0 +1,4 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.24612 8.5509C7.73313 8.5509 7.32812 9.0009 7.32812 9.5499C7.32812 10.0989 7.74213 10.5489 8.24612 10.5489C8.75912 10.5489 9.16412 10.0989 9.16412 9.5499C9.17312 9.0009 8.75912 8.5509 8.24612 8.5509ZM11.5311 8.5509C11.0181 8.5509 10.6131 9.0009 10.6131 9.5499C10.6131 10.0989 11.0271 10.5489 11.5311 10.5489C12.0441 10.5489 12.4491 10.0989 12.4491 9.5499C12.4491 9.0009 12.0441 8.5509 11.5311 8.5509Z" fill="black"/>
|
||||
<path d="M15.905 1H3.845C2.828 1 2 1.828 2 2.854V15.022C2 16.048 2.828 16.876 3.845 16.876H14.051L13.574 15.211L14.726 16.282L15.815 17.29L17.75 19V2.854C17.75 1.828 16.922 1 15.905 1ZM12.431 12.754C12.431 12.754 12.107 12.367 11.837 12.025C13.016 11.692 13.466 10.954 13.466 10.954C13.097 11.197 12.746 11.368 12.431 11.485C11.981 11.674 11.549 11.8 11.126 11.872C10.262 12.034 9.47 11.989 8.795 11.863C8.282 11.764 7.841 11.62 7.472 11.476C7.265 11.395 7.04 11.296 6.815 11.17C6.788 11.152 6.761 11.143 6.734 11.125C6.716 11.116 6.707 11.107 6.698 11.098C6.536 11.008 6.446 10.945 6.446 10.945C6.446 10.945 6.878 11.665 8.021 12.007C7.751 12.349 7.418 12.754 7.418 12.754C5.429 12.691 4.673 11.386 4.673 11.386C4.673 8.488 5.969 6.139 5.969 6.139C7.265 5.167 8.498 5.194 8.498 5.194L8.588 5.302C6.968 5.77 6.221 6.481 6.221 6.481C6.221 6.481 6.419 6.373 6.752 6.22C7.715 5.797 8.48 5.68 8.795 5.653C8.849 5.644 8.894 5.635 8.948 5.635C9.497 5.563 10.118 5.545 10.766 5.617C11.621 5.716 12.539 5.968 13.475 6.481C13.475 6.481 12.764 5.806 11.234 5.338L11.36 5.194C11.36 5.194 12.593 5.167 13.889 6.139C13.889 6.139 15.185 8.488 15.185 11.386C15.185 11.386 14.42 12.691 12.431 12.754Z" fill="black"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 1.7 KiB |
|
@ -0,0 +1,4 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.25 8.64319V16.2506C16.25 16.7479 16.0525 17.2248 15.7008 17.5764C15.3492 17.9281 14.8723 18.1256 14.375 18.1256H5.625C5.12772 18.1256 4.65081 17.9281 4.29917 17.5764C3.94754 17.2248 3.75 16.7479 3.75 16.2506V3.75061C3.75 3.25333 3.94754 2.77642 4.29917 2.42479C4.65081 2.07315 5.12772 1.87561 5.625 1.87561H9.48242C9.81383 1.87566 10.1316 2.00731 10.366 2.24163L15.884 7.75959C16.1183 7.99396 16.2499 8.31178 16.25 8.64319Z" stroke="black" stroke-width="1.5" stroke-linejoin="round"/>
|
||||
<path d="M10 2.18823V6.87573C10 7.20725 10.1317 7.52519 10.3661 7.75961C10.6005 7.99404 10.9185 8.12573 11.25 8.12573H15.9375" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 811 B |
|
@ -0,0 +1,5 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.875 6.87488V5.31238C6.875 4.89798 7.03962 4.50055 7.33265 4.20752C7.62567 3.9145 8.0231 3.74988 8.4375 3.74988H16.5625C16.9769 3.74988 17.3743 3.9145 17.6674 4.20752C17.9604 4.50055 18.125 4.89798 18.125 5.31238V14.6874C18.125 15.1018 17.9604 15.4992 17.6674 15.7922C17.3743 16.0853 16.9769 16.2499 16.5625 16.2499H8.4375C8.0231 16.2499 7.62567 16.0853 7.33265 15.7922C7.03962 15.4992 6.875 15.1018 6.875 14.6874V13.1249" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10.625 13.125L13.75 10L10.625 6.875" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M1.875 9.99988H13.125" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 865 B |
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.25 15.375C2.62868 15.375 2.125 14.8713 2.125 14.25V5.25C2.125 4.62868 2.62868 4.125 3.25 4.125H16.75C17.3713 4.125 17.875 4.62868 17.875 5.25V14.25C17.875 14.8713 17.3713 15.375 16.75 15.375H3.25ZM1 14.25C1 15.4926 2.00736 16.5 3.25 16.5H16.75C17.9926 16.5 19 15.4926 19 14.25V5.25C19 4.00736 17.9926 3 16.75 3H3.25C2.00736 3 1 4.00736 1 5.25V14.25ZM8.95776 11.6918C8.75383 11.936 8.46555 12.1261 8.09293 12.262C7.72031 12.3955 7.30741 12.4622 6.85422 12.4622C6.37838 12.4622 5.96044 12.359 5.60041 12.1525C5.24289 11.9436 4.96595 11.6414 4.76956 11.2462C4.5757 10.8509 4.47625 10.3864 4.47122 9.85261V9.47873C4.47122 8.92987 4.56311 8.45529 4.74691 8.05497C4.93322 7.65214 5.20009 7.34498 5.54753 7.13349C5.89749 6.91949 6.30662 6.81249 6.77491 6.81249C7.427 6.81249 7.93683 6.96858 8.30442 7.28078C8.672 7.59046 8.88978 8.04238 8.95776 8.63656H7.85501C7.80465 8.32185 7.69261 8.09148 7.51889 7.94545C7.34769 7.79943 7.11103 7.72641 6.8089 7.72641C6.42369 7.72641 6.13038 7.87118 5.92897 8.16072C5.72755 8.45025 5.62558 8.88078 5.62306 9.4523V9.80351C5.62306 10.3801 5.73258 10.8156 5.95162 11.1102C6.17066 11.4048 6.49167 11.5521 6.91465 11.5521C7.34014 11.5521 7.64352 11.4614 7.82479 11.2801V10.3322H6.7938V9.49761H8.95776V11.6918ZM11.084 12.3867H9.95099V6.88802H11.084V12.3867ZM13.2706 10.1396H15.4459V9.2257H13.2706V7.80572H15.7178V6.88802H12.1376V12.3867H13.2706V10.1396Z" fill="black"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 1.5 KiB |
|
@ -0,0 +1,7 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M12.2738 18.8398L10.0562 14.3577L8.30269 12.1159C8.04364 11.6776 7.90698 11.1778 7.90698 10.6687V5.62415H8.51909C8.72544 5.62409 8.92978 5.66469 9.12044 5.74363C9.3111 5.82256 9.48434 5.93828 9.63027 6.08417C9.77621 6.23006 9.89197 6.40328 9.97095 6.59392C10.0499 6.78456 10.0906 6.98889 10.0906 7.19524V14.3577" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M4.99609 11.4464V8.53547C4.99609 8.53547 6.45156 5.62415 7.90703 5.62415" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M14.457 10.7187L11.875 9.02258" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M6.66138 18.6841L8.75005 15.6232" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10.0905 4.16863C10.8943 4.16863 11.5459 3.51699 11.5459 2.71316C11.5459 1.90933 10.8943 1.25769 10.0905 1.25769C9.28665 1.25769 8.63501 1.90933 8.63501 2.71316C8.63501 3.51699 9.28665 4.16863 10.0905 4.16863Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 1.2 KiB |
|
@ -0,0 +1,5 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 2C8.41775 2 6.87103 2.46919 5.55544 3.34824C4.23985 4.22729 3.21447 5.47672 2.60897 6.93853C2.00347 8.40034 1.84504 10.0089 2.15372 11.5607C2.4624 13.1126 3.22433 14.538 4.34315 15.6569C5.46197 16.7757 6.88743 17.5376 8.43928 17.8463C9.99113 18.155 11.5997 17.9965 13.0615 17.391C14.5233 16.7855 15.7727 15.7602 16.6518 14.4446C17.5308 13.129 18 11.5822 18 10C18 7.87827 17.1571 5.84344 15.6569 4.34315C14.1566 2.84285 12.1217 2 10 2Z" stroke="black" stroke-miterlimit="10"/>
|
||||
<path d="M7.45435 7.55991C7.45435 7.55991 7.49253 6.76446 8.34389 6.07946C8.84889 5.67264 9.45434 5.55491 9.9998 5.54673C10.4966 5.54037 10.9403 5.62264 11.2057 5.749C11.6603 5.96537 12.5453 6.49355 12.5453 7.61673C12.5453 8.79855 11.7725 9.33537 10.8921 9.92582C10.0116 10.5163 9.77253 11.1572 9.77253 11.8195" stroke="black" stroke-miterlimit="10" stroke-linecap="round"/>
|
||||
<path d="M9.85455 14.8441C10.2883 14.8441 10.64 14.4924 10.64 14.0586C10.64 13.6249 10.2883 13.2732 9.85455 13.2732C9.42075 13.2732 9.06909 13.6249 9.06909 14.0586C9.06909 14.4924 9.42075 14.8441 9.85455 14.8441Z" fill="black"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 1.2 KiB |
|
@ -0,0 +1,7 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.8749 17.5004C16.7928 17.5005 16.7115 17.4844 16.6357 17.453C16.5599 17.4215 16.491 17.3754 16.4331 17.3172L2.68312 3.5672C2.57086 3.44904 2.5092 3.29169 2.51128 3.12872C2.51337 2.96574 2.57904 2.81003 2.69429 2.69478C2.80954 2.57953 2.96525 2.51386 3.12823 2.51177C3.29121 2.50968 3.44855 2.57134 3.56671 2.68361L17.3167 16.4336C17.4041 16.521 17.4635 16.6323 17.4876 16.7535C17.5117 16.8747 17.4993 17.0004 17.4521 17.1145C17.4048 17.2287 17.3247 17.3263 17.222 17.395C17.1193 17.4637 16.9985 17.5003 16.8749 17.5004Z" fill="black"/>
|
||||
<path d="M9.98676 15.0002C8.36606 15.0002 6.80317 14.5205 5.34145 13.5744C4.01059 12.7151 2.81255 11.4842 1.87661 10.0197V10.0166C2.65551 8.9006 3.50864 7.95685 4.42505 7.19591C4.43334 7.18898 4.4401 7.18041 4.44491 7.17073C4.44971 7.16105 4.45246 7.15048 4.45297 7.13969C4.45349 7.1289 4.45176 7.11811 4.44789 7.10802C4.44403 7.09793 4.43811 7.08876 4.43051 7.08107L3.65239 6.30412C3.63856 6.29017 3.61999 6.28195 3.60038 6.28108C3.58076 6.28021 3.56154 6.28676 3.54653 6.29943C2.57309 7.11974 1.66958 8.12599 0.848093 9.30411C0.706759 9.50697 0.628921 9.74726 0.62447 9.99445C0.620018 10.2416 0.689155 10.4846 0.823093 10.6924C1.85473 12.3068 3.18247 13.6666 4.66216 14.624C6.32817 15.7033 8.12114 16.2502 9.98676 16.2502C10.9938 16.2471 11.9937 16.0811 12.9477 15.7588C12.9603 15.7545 12.9716 15.7471 12.9805 15.7373C12.9894 15.7274 12.9957 15.7155 12.9987 15.7025C13.0017 15.6896 13.0014 15.6761 12.9977 15.6633C12.994 15.6505 12.9872 15.6389 12.9778 15.6295L12.1348 14.7865C12.1154 14.7676 12.0914 14.754 12.0652 14.7472C12.0389 14.7404 12.0114 14.7404 11.9852 14.7475C11.3324 14.9156 10.6609 15.0005 9.98676 15.0002Z" fill="black"/>
|
||||
<path d="M19.1733 9.31994C18.1398 7.72151 16.7987 6.3637 15.2956 5.39299C13.6327 4.31799 11.7968 3.74963 9.98663 3.74963C8.99029 3.7514 8.00135 3.92082 7.06124 4.25081C7.04871 4.25516 7.0375 4.26264 7.02866 4.27253C7.01983 4.28242 7.01365 4.29439 7.01072 4.30733C7.00779 4.32026 7.0082 4.33373 7.01191 4.34646C7.01563 4.35919 7.02252 4.37077 7.03194 4.3801L7.87374 5.2219C7.89334 5.24116 7.91767 5.25492 7.94428 5.26178C7.97089 5.26863 7.99883 5.26835 8.0253 5.26096C8.66474 5.08798 9.32421 5.00012 9.98663 4.99963C11.5761 4.99963 13.1343 5.48518 14.6175 6.44495C15.9733 7.31994 17.1855 8.54963 18.1237 9.99963C18.1244 10.0005 18.1248 10.0016 18.1248 10.0028C18.1248 10.0039 18.1244 10.005 18.1237 10.0059C17.4427 11.0781 16.5975 12.0368 15.6191 12.8469C15.6107 12.8538 15.6038 12.8624 15.5989 12.8721C15.5941 12.8818 15.5913 12.8924 15.5907 12.9032C15.5902 12.9141 15.5919 12.9249 15.5957 12.935C15.5996 12.9452 15.6056 12.9544 15.6132 12.9621L16.3905 13.7391C16.4043 13.753 16.4228 13.7612 16.4423 13.7621C16.4618 13.7631 16.481 13.7567 16.496 13.7442C17.5405 12.8647 18.4447 11.8309 19.1773 10.6785C19.3067 10.4755 19.3752 10.2395 19.3745 9.99867C19.3738 9.75783 19.304 9.52226 19.1733 9.31994Z" fill="black"/>
|
||||
<path d="M9.99979 6.24939C9.7189 6.24924 9.43888 6.28069 9.16502 6.34314C9.15119 6.34601 9.1384 6.35258 9.128 6.36215C9.11761 6.37172 9.11 6.38392 9.10599 6.39747C9.10199 6.41102 9.10173 6.4254 9.10524 6.43908C9.10876 6.45276 9.11592 6.46524 9.12596 6.47517L13.524 10.872C13.5339 10.8821 13.5464 10.8892 13.5601 10.8928C13.5738 10.8963 13.5882 10.896 13.6017 10.892C13.6153 10.888 13.6275 10.8804 13.637 10.87C13.6466 10.8596 13.6532 10.8468 13.656 10.833C13.7813 10.2838 13.7811 9.71342 13.6557 9.16427C13.5302 8.61512 13.2827 8.10129 12.9314 7.66093C12.5802 7.22057 12.1342 6.865 11.6267 6.62064C11.1191 6.37627 10.5631 6.24938 9.99979 6.24939Z" fill="black"/>
|
||||
<path d="M6.47584 9.12779C6.4659 9.11775 6.45343 9.11059 6.43975 9.10707C6.42606 9.10356 6.41168 9.10382 6.39814 9.10782C6.38459 9.11183 6.37238 9.11944 6.36282 9.12983C6.35325 9.14023 6.34668 9.15302 6.34381 9.16686C6.20215 9.78574 6.21993 10.4305 6.39551 11.0406C6.57108 11.6507 6.89868 12.2063 7.34762 12.6552C7.79655 13.1042 8.35212 13.4318 8.96225 13.6073C9.57239 13.7829 10.2171 13.8007 10.836 13.659C10.8498 13.6562 10.8626 13.6496 10.873 13.64C10.8834 13.6305 10.891 13.6183 10.895 13.6047C10.899 13.5912 10.8993 13.5768 10.8958 13.5631C10.8923 13.5494 10.8851 13.5369 10.8751 13.527L6.47584 9.12779Z" fill="black"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 4.2 KiB |
|
@ -0,0 +1,105 @@
|
|||
import React from "react";
|
||||
import { withDesign } from "storybook-addon-designs";
|
||||
import { ReactComponent as AudioIcon } from "./Audio.svg";
|
||||
import { ReactComponent as AvatarIcon } from "./Avatar.svg";
|
||||
import { ReactComponent as CameraIcon } from "./Camera.svg";
|
||||
import { ReactComponent as CaretDownIcon } from "./CaretDown.svg";
|
||||
import { ReactComponent as ChatIcon } from "./Chat.svg";
|
||||
import { ReactComponent as ChevronBackIcon } from "./ChevronBack.svg";
|
||||
import { ReactComponent as CloseIcon } from "./Close.svg";
|
||||
import { ReactComponent as DeleteIcon } from "./Delete.svg";
|
||||
import { ReactComponent as DesktopIcon } from "./Desktop.svg";
|
||||
import { ReactComponent as DiscordIcon } from "./Discord.svg";
|
||||
import { ReactComponent as DocumentIcon } from "./Document.svg";
|
||||
import { ReactComponent as EnterIcon } from "./Enter.svg";
|
||||
import { ReactComponent as GIFIcon } from "./GIF.svg";
|
||||
import { ReactComponent as GoToIcon } from "./GoTo.svg";
|
||||
import { ReactComponent as HelpIcon } from "./Help.svg";
|
||||
import { ReactComponent as HideIcon } from "./Hide.svg";
|
||||
import { ReactComponent as ImageIcon } from "./Image.svg";
|
||||
import { ReactComponent as InviteIcon } from "./Invite.svg";
|
||||
import { ReactComponent as LeaveIcon } from "./Leave.svg";
|
||||
import { ReactComponent as LinkIcon } from "./Link.svg";
|
||||
import { ReactComponent as MicrophoneIcon } from "./Microphone.svg";
|
||||
import { ReactComponent as MicrophoneMutedIcon } from "./MicrophoneMuted.svg";
|
||||
import { ReactComponent as MoreIcon } from "./More.svg";
|
||||
import { ReactComponent as ObjectIcon } from "./Object.svg";
|
||||
import { ReactComponent as ObjectsIcon } from "./Objects.svg";
|
||||
import { ReactComponent as PenIcon } from "./Pen.svg";
|
||||
import { ReactComponent as PeopleIcon } from "./People.svg";
|
||||
import { ReactComponent as PhoneIcon } from "./Phone.svg";
|
||||
import { ReactComponent as PinIcon } from "./Pin.svg";
|
||||
import { ReactComponent as ReactionIcon } from "./Reaction.svg";
|
||||
import { ReactComponent as SceneIcon } from "./Scene.svg";
|
||||
import { ReactComponent as SettingsIcon } from "./Settings.svg";
|
||||
import { ReactComponent as ShareIcon } from "./Share.svg";
|
||||
import { ReactComponent as ShowIcon } from "./Show.svg";
|
||||
import { ReactComponent as StarIcon } from "./Star.svg";
|
||||
import { ReactComponent as TextIcon } from "./Text.svg";
|
||||
import { ReactComponent as UploadIcon } from "./Upload.svg";
|
||||
import { ReactComponent as VideoIcon } from "./Video.svg";
|
||||
import { ReactComponent as VolumeHighIcon } from "./VolumeHigh.svg";
|
||||
import { ReactComponent as VolumeMutedIcon } from "./VolumeMuted.svg";
|
||||
import { ReactComponent as VolumeOffIcon } from "./VolumeOff.svg";
|
||||
import { ReactComponent as VRIcon } from "./VR.svg";
|
||||
import { ReactComponent as WandIcon } from "./Wand.svg";
|
||||
|
||||
export default {
|
||||
title: "Icon",
|
||||
decorators: [withDesign],
|
||||
argTypes: {
|
||||
color: { control: "color" }
|
||||
}
|
||||
};
|
||||
|
||||
export const AllIcons = args => (
|
||||
<>
|
||||
<AudioIcon {...args} />
|
||||
<AvatarIcon {...args} />
|
||||
<CameraIcon {...args} />
|
||||
<CaretDownIcon {...args} />
|
||||
<ChatIcon {...args} />
|
||||
<ChevronBackIcon {...args} />
|
||||
<CloseIcon {...args} />
|
||||
<DeleteIcon {...args} />
|
||||
<DesktopIcon {...args} />
|
||||
<DiscordIcon {...args} />
|
||||
<DocumentIcon {...args} />
|
||||
<EnterIcon {...args} />
|
||||
<GIFIcon {...args} />
|
||||
<GoToIcon {...args} />
|
||||
<HelpIcon {...args} />
|
||||
<HideIcon {...args} />
|
||||
<ImageIcon {...args} />
|
||||
<InviteIcon {...args} />
|
||||
<LeaveIcon {...args} />
|
||||
<LinkIcon {...args} />
|
||||
<MicrophoneIcon {...args} />
|
||||
<MicrophoneMutedIcon {...args} />
|
||||
<MoreIcon {...args} />
|
||||
<ObjectIcon {...args} />
|
||||
<ObjectsIcon {...args} />
|
||||
<PenIcon {...args} />
|
||||
<PeopleIcon {...args} />
|
||||
<PhoneIcon {...args} />
|
||||
<PinIcon {...args} />
|
||||
<ReactionIcon {...args} />
|
||||
<SceneIcon {...args} />
|
||||
<SettingsIcon {...args} />
|
||||
<ShareIcon {...args} />
|
||||
<ShowIcon {...args} />
|
||||
<StarIcon {...args} />
|
||||
<TextIcon {...args} />
|
||||
<UploadIcon {...args} />
|
||||
<VideoIcon {...args} />
|
||||
<VolumeHighIcon {...args} />
|
||||
<VolumeMutedIcon {...args} />
|
||||
<VolumeOffIcon {...args} />
|
||||
<VRIcon {...args} />
|
||||
<WandIcon {...args} />
|
||||
</>
|
||||
);
|
||||
|
||||
AllIcons.parameters = {
|
||||
color: "#000"
|
||||
};
|
|
@ -0,0 +1,46 @@
|
|||
/**
|
||||
* https://react-svgr.com/docs/custom-templates/
|
||||
*
|
||||
* This template is used in both the Storybook Webpack Config and app Webpack Config.
|
||||
*
|
||||
* Set the default icon color to #000 so we can set icon fill/stroke via CSS or via props.
|
||||
*
|
||||
* Set Color via CSS for any icon:
|
||||
*
|
||||
* svg {
|
||||
* *[stroke=\#000] {
|
||||
* stroke: white;
|
||||
* }
|
||||
*
|
||||
* *[fill=\#000] {
|
||||
* fill: white;
|
||||
* }
|
||||
* }
|
||||
*
|
||||
*
|
||||
* Set Color Via React Props:
|
||||
*
|
||||
* <IconComponent color="red" />
|
||||
*
|
||||
*/
|
||||
function defaultTemplate({ template }, opts, { imports, interfaces, componentName, props, jsx, exports }) {
|
||||
const plugins = ["jsx"];
|
||||
if (opts.typescript) {
|
||||
plugins.push("typescript");
|
||||
}
|
||||
const typeScriptTpl = template.smart({ plugins });
|
||||
return typeScriptTpl.ast`${imports}
|
||||
${interfaces}
|
||||
function ${componentName}(${props}) {
|
||||
return ${jsx};
|
||||
}
|
||||
|
||||
${componentName}.defaultProps = {
|
||||
color: "#000"
|
||||
};
|
||||
|
||||
${exports}
|
||||
`;
|
||||
}
|
||||
|
||||
module.exports = defaultTemplate;
|
|
@ -0,0 +1,6 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.2502 3.12549H3.75024C2.71471 3.12549 1.87524 3.96495 1.87524 5.00049V15.0005C1.87524 16.036 2.71471 16.8755 3.75024 16.8755H16.2502C17.2858 16.8755 18.1252 16.036 18.1252 15.0005V5.00049C18.1252 3.96495 17.2858 3.12549 16.2502 3.12549Z" stroke="black" stroke-width="1.5" stroke-linejoin="round"/>
|
||||
<path d="M13.125 8.12488C13.8154 8.12488 14.375 7.56523 14.375 6.87488C14.375 6.18452 13.8154 5.62488 13.125 5.62488C12.4346 5.62488 11.875 6.18452 11.875 6.87488C11.875 7.56523 12.4346 8.12488 13.125 8.12488Z" stroke="black" stroke-width="1.5" stroke-miterlimit="10"/>
|
||||
<path d="M11.8752 13.1162L8.33384 9.58147C8.10849 9.35617 7.8056 9.22544 7.48708 9.216C7.16856 9.20656 6.85846 9.31913 6.62017 9.53069L1.87524 13.7494" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8.75 16.8752L13.568 12.0572C13.7883 11.8364 14.0832 11.706 14.3948 11.6915C14.7064 11.6771 15.0121 11.7796 15.252 11.9791L18.125 14.3752" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 1.1 KiB |
|
@ -0,0 +1,4 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.5625 3.75098H3.4375C2.57455 3.75098 1.875 4.45053 1.875 5.31348V14.6885C1.875 15.5514 2.57455 16.251 3.4375 16.251H16.5625C17.4254 16.251 18.125 15.5514 18.125 14.6885V5.31348C18.125 4.45053 17.4254 3.75098 16.5625 3.75098Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M4.37476 6.2511L9.99975 10.6261L15.6248 6.2511" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 564 B |
|
@ -0,0 +1,5 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13.5 6.87488V5.31238C13.5 4.89798 13.3354 4.50055 13.0424 4.20752C12.7493 3.9145 12.3519 3.74988 11.9375 3.74988H4.4375C4.0231 3.74988 3.62567 3.9145 3.33265 4.20752C3.03962 4.50055 2.875 4.89798 2.875 5.31238V14.6874C2.875 15.1018 3.03962 15.4992 3.33265 15.7922C3.62567 16.0853 4.0231 16.2499 4.4375 16.2499H11.9375C12.3519 16.2499 12.7493 16.0853 13.0424 15.7922C13.3354 15.4992 13.5 15.1018 13.5 14.6874V13.1249" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M16 6.875L19.125 10L16 13.125" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8.46094 9.99988H19.125" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 853 B |
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.85142 11.038C4.3064 11.583 4.0002 12.3222 4.0002 13.093C4.0002 13.8638 4.3064 14.603 4.85142 15.148C5.39645 15.6931 6.13567 15.9993 6.90645 15.9993C7.67724 15.9993 8.41645 15.6931 8.96148 15.148L10.7292 13.3803C11.0588 13.0508 11.593 13.0508 11.9225 13.3803C12.252 13.7098 12.252 14.244 11.9225 14.5735L10.1547 16.3413C9.29323 17.2028 8.12479 17.6868 6.90645 17.6868C5.68812 17.6868 4.51968 17.2028 3.65818 16.3413C2.79669 15.4798 2.3127 14.3114 2.31271 13.093C2.3127 11.8747 2.79669 10.7062 3.65818 9.84475L5.42595 8.07698C5.75545 7.74748 6.28969 7.74748 6.61919 8.07698C6.9487 8.40649 6.9487 8.94072 6.61919 9.27022L4.85142 11.038ZM8.0776 6.61857C7.7481 6.28907 7.7481 5.75483 8.0776 5.42533L9.84537 3.65756C10.7069 2.79607 11.8753 2.31208 13.0936 2.31208C14.312 2.31208 15.4804 2.79607 16.3419 3.65756C17.2034 4.51906 17.6874 5.68749 17.6874 6.90583C17.6874 8.12417 17.2034 9.29261 16.3419 10.1541L14.5741 11.9219C14.2446 12.2514 13.7104 12.2514 13.3809 11.9219C13.0514 11.5924 13.0514 11.0581 13.3809 10.7286L15.1487 8.96086C15.6937 8.41583 15.9999 7.67662 15.9999 6.90583C15.9999 6.13505 15.6937 5.39583 15.1487 4.8508C14.6036 4.30578 13.8644 3.99958 13.0936 3.99958C12.3229 3.99958 11.5836 4.30578 11.0386 4.8508L9.27084 6.61857C8.94134 6.94808 8.40711 6.94808 8.0776 6.61857ZM6.84241 11.9631C6.5129 12.2926 6.5129 12.8269 6.84241 13.1564C7.17191 13.4859 7.70615 13.4859 8.03565 13.1564L13.2124 7.97958C13.5419 7.65008 13.5419 7.11584 13.2124 6.78634C12.8829 6.45683 12.3487 6.45683 12.0192 6.78634L6.84241 11.9631Z" fill="black"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 1.7 KiB |
|
@ -0,0 +1,6 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.5 17.5006H12.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M15 8.12573V9.37573C15 12.1257 12.75 14.3757 10 14.3757C7.25 14.3757 5 12.1257 5 9.37573V8.12573" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M9.99976 14.3761V17.5011" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 2.50028C9.67126 2.49862 9.34543 2.56215 9.04137 2.6872C8.7373 2.81225 8.46105 2.99634 8.22857 3.22882C7.99609 3.46129 7.81201 3.73755 7.68696 4.04161C7.56191 4.34567 7.49838 4.67151 7.50003 5.00028V9.33621C7.50003 10.7112 8.63284 11.8753 10 11.8753C11.3672 11.8753 12.5 10.7425 12.5 9.33621V5.00028C12.5 3.59403 11.4063 2.50028 10 2.50028Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 959 B |
|
@ -0,0 +1,7 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.5 17.5006H12.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M15 8.12573V9.37573C15 12.1257 12.75 14.3757 10 14.3757C7.25 14.3757 5 12.1257 5 9.37573V8.12573" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M9.99976 14.3761V17.5011" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 2.50028C9.67126 2.49862 9.34543 2.56215 9.04137 2.6872C8.7373 2.81225 8.46105 2.99634 8.22857 3.22882C7.99609 3.46129 7.81201 3.73755 7.68696 4.04161C7.56191 4.34567 7.49838 4.67151 7.50003 5.00028V9.33621C7.50003 10.7112 8.63284 11.8753 10 11.8753C11.3672 11.8753 12.5 10.7425 12.5 9.33621V5.00028C12.5 3.59403 11.4063 2.50028 10 2.50028Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M16.875 15.6252L3.75 2.50024" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 1.1 KiB |
|
@ -0,0 +1,5 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 12.25C11.1046 12.25 12 11.3546 12 10.25C12 9.14543 11.1046 8.25 10 8.25C8.89543 8.25 8 9.14543 8 10.25C8 11.3546 8.89543 12.25 10 12.25Z" fill="black"/>
|
||||
<path d="M10 18.4996C11.1046 18.4996 12 17.6042 12 16.4996C12 15.3951 11.1046 14.4996 10 14.4996C8.89543 14.4996 8 15.3951 8 16.4996C8 17.6042 8.89543 18.4996 10 18.4996Z" fill="black"/>
|
||||
<path d="M10 6C11.1046 6 12 5.10457 12 4C12 2.89543 11.1046 2 10 2C8.89543 2 8 2.89543 8 4C8 5.10457 8.89543 6 10 6Z" fill="black"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 589 B |
|
@ -0,0 +1,5 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.5 13.3361V6.66583C17.4997 6.44751 17.4423 6.23307 17.3334 6.04385C17.2245 5.85463 17.0679 5.69723 16.8793 5.58732L10.9418 2.13185C10.6557 1.9653 10.3306 1.87756 9.99961 1.87756C9.66859 1.87756 9.34349 1.9653 9.05742 2.13185L3.1207 5.58732C2.93207 5.69723 2.77551 5.85463 2.66661 6.04385C2.55771 6.23307 2.50027 6.44751 2.5 6.66583V13.3361C2.50013 13.5546 2.55751 13.7692 2.66641 13.9586C2.77532 14.1479 2.93195 14.3055 3.1207 14.4154L9.0582 17.8709C9.34435 18.0372 9.66942 18.1248 10.0004 18.1248C10.3314 18.1248 10.6564 18.0372 10.9426 17.8709L16.8801 14.4154C17.0687 14.3054 17.2252 14.1478 17.3339 13.9584C17.4427 13.7691 17.4999 13.5545 17.5 13.3361Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M2.69531 6.01636L10 10.3132L17.3047 6.01636" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 18.1254V10.3129" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 1.1 KiB |
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.15184 1.79111C9.37183 1.66593 9.62184 1.59998 9.8764 1.59998C10.131 1.59998 10.381 1.66593 10.601 1.79113L14.0247 3.73874C14.1879 3.83166 14.3233 3.96473 14.4175 4.1247C14.5116 4.28467 14.5613 4.46596 14.5616 4.65054V8.41052C14.5615 8.4485 14.5594 8.48634 14.5553 8.52389C14.7253 8.55202 14.8893 8.60986 15.0395 8.69528L18.4632 10.6429C18.6263 10.7358 18.7617 10.8689 18.8559 11.0289C18.9501 11.1888 18.9998 11.3701 19 11.5547V15.3147C19 15.4993 18.9505 15.6807 18.8564 15.8408C18.7623 16.0009 18.627 16.1341 18.4639 16.2271L18.4635 16.2274L15.0399 18.1749L15.0397 18.175C14.8312 18.2934 14.5959 18.3587 14.3554 18.3653C14.3422 18.3667 14.3288 18.3674 14.3153 18.3674C14.3017 18.3674 14.2883 18.3667 14.2751 18.3653C14.0346 18.3587 13.7994 18.2934 13.591 18.175L13.5908 18.1749L10.1672 16.2274L10.167 16.2273C10.1075 16.1934 10.0517 16.1541 10.0002 16.1102C9.94879 16.154 9.89308 16.1933 9.83369 16.2271L9.8333 16.2274L6.4097 18.1749L6.40952 18.175C6.20107 18.2934 5.96575 18.3587 5.72516 18.3653C5.71199 18.3667 5.69862 18.3674 5.68506 18.3674C5.67148 18.3674 5.65808 18.3667 5.6449 18.3653C5.4044 18.3587 5.16917 18.2934 4.96079 18.175L4.96062 18.1749L1.53701 16.2274L1.53685 16.2273C1.3736 16.1343 1.23813 16.0011 1.14393 15.841C1.04974 15.6809 1.00011 15.4995 1 15.3148V11.5547C1.00023 11.3701 1.04991 11.1888 1.1441 11.0289C1.23829 10.8689 1.3737 10.7358 1.53685 10.6429L4.96012 8.69528L4.96015 8.69526C5.0388 8.65051 5.12128 8.61333 5.20644 8.58402C5.19669 8.52693 5.19172 8.46895 5.19169 8.41065V4.65054C5.19192 4.46596 5.2416 4.28467 5.33579 4.1247C5.42998 3.96473 5.56539 3.83166 5.72854 3.73874L9.15181 1.79113L9.15184 1.79111ZM9.51618 10.4627L6.4093 8.69528C6.26127 8.61104 6.09965 8.55363 5.9322 8.52507C5.91919 8.4883 5.91246 8.44953 5.91243 8.41031V4.83662L9.51618 6.9087V10.4627ZM13.7811 8.60438C13.7156 8.62995 13.6518 8.6603 13.5903 8.69526L13.5903 8.69528L10.2369 10.6031V6.90891L13.8408 4.83677V8.41036V8.41044C13.8407 8.47195 13.8242 8.53238 13.7929 8.58572C13.7892 8.59207 13.7852 8.59829 13.7811 8.60438ZM5.575 9.21719C5.48638 9.23055 5.40075 9.26004 5.3227 9.30446L5.32267 9.30448L2.09662 11.1399L5.68501 13.2031L9.09877 11.2403L5.7287 9.3232L5.72854 9.32311C5.67411 9.29211 5.62276 9.25664 5.575 9.21719ZM10.7789 11.1698L14.3152 13.2031L17.9035 11.14L14.6769 9.30449L14.6768 9.30446C14.5669 9.24192 14.442 9.20897 14.3149 9.20897C14.2664 9.20897 14.2184 9.21375 14.1713 9.22312C14.1257 9.26014 14.0769 9.29356 14.0254 9.32298L14.025 9.3232L10.7789 11.1698ZM9.87638 2.30449C9.74921 2.30449 9.62432 2.33744 9.51442 2.39997L9.51439 2.39999L6.28835 4.2354L9.87674 6.29865L13.465 4.23548L10.2384 2.4L10.2383 2.39997C10.1284 2.33744 10.0035 2.30449 9.87638 2.30449ZM9.63017 15.3148V11.7521L6.04544 13.8133V17.5673L6.0471 17.5663L6.04728 17.5662L9.47032 15.619L9.47064 15.6188C9.52487 15.5878 9.56987 15.5435 9.60117 15.4902C9.6156 15.4656 9.62688 15.4396 9.63486 15.4126C9.63176 15.3802 9.63019 15.3475 9.63017 15.3148ZM10.3989 15.4901C10.3845 15.4656 10.3732 15.4396 10.3652 15.4127C10.3683 15.3802 10.3699 15.3475 10.3699 15.3147V11.752L13.9549 13.8133V17.5672L13.9533 17.5663L13.9531 17.5662L10.5299 15.6189L10.5297 15.6188C10.4754 15.5878 10.4303 15.5434 10.3989 15.4901ZM5.32468 13.8133L1.7207 11.7411V15.3148C1.72076 15.3763 1.7373 15.4368 1.76868 15.4901C1.80005 15.5434 1.84515 15.5878 1.89949 15.6188L1.89965 15.6189L5.32292 17.5662L5.3231 17.5663L5.32468 17.5672V13.8133ZM14.6756 17.5673L14.6773 17.5663L14.6775 17.5662L18.1005 15.619L18.1008 15.6188C18.1551 15.5878 18.2001 15.5435 18.2314 15.4902C18.2627 15.4369 18.2792 15.3764 18.2793 15.3149V15.3148V11.7413L14.6756 13.8133V17.5673Z" fill="black"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 3.7 KiB |
|
@ -0,0 +1,4 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.02368 18.1251H1.87524V15.9767L13.9901 3.83179L16.1686 6.01069L4.02368 18.1251Z" fill="black"/>
|
||||
<path d="M16.6297 5.54688L14.4531 3.37032L15.6898 2.17266C15.8809 1.98047 16.1738 1.875 16.4453 1.875C16.579 1.87465 16.7114 1.90078 16.8348 1.95187C16.9583 2.00295 17.0705 2.078 17.1648 2.17266L17.8289 2.83672C17.9232 2.93096 17.9979 3.04291 18.0487 3.16613C18.0995 3.28935 18.1254 3.4214 18.125 3.55469C18.125 3.82813 18.0191 4.11914 17.8273 4.31094L16.6297 5.54688Z" fill="black"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 595 B |
|
@ -0,0 +1,6 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.7031 6.56262C15.5886 8.15129 14.4101 9.37512 13.1249 9.37512C11.8398 9.37512 10.6593 8.15168 10.5468 6.56262C10.4296 4.90989 11.5769 3.75012 13.1249 3.75012C14.673 3.75012 15.8202 4.93997 15.7031 6.56262Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M13.1251 11.875C10.5794 11.875 8.13134 13.1395 7.51806 15.602C7.43681 15.9277 7.6411 16.25 7.97587 16.25H18.2747C18.6095 16.25 18.8126 15.9277 18.7325 15.602C18.1192 13.1 15.6712 11.875 13.1251 11.875Z" stroke="black" stroke-width="1.5" stroke-miterlimit="10"/>
|
||||
<path d="M7.81238 7.26352C7.72098 8.53227 6.76863 9.53149 5.74207 9.53149C4.71551 9.53149 3.7616 8.53266 3.67176 7.26352C3.5784 5.9436 4.50535 5.00024 5.74207 5.00024C6.97879 5.00024 7.90574 5.96782 7.81238 7.26352Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8.04677 11.9535C7.34169 11.6304 6.56513 11.5062 5.74208 11.5062C3.71083 11.5062 1.7538 12.516 1.26357 14.4828C1.19911 14.7429 1.36239 15.0004 1.62958 15.0004H6.01552" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 1.2 KiB |
|
@ -0,0 +1,11 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0)">
|
||||
<path d="M13.125 0.624634H6.875C5.83947 0.624634 5 1.4641 5 2.49963V17.4996C5 18.5352 5.83947 19.3746 6.875 19.3746H13.125C14.1605 19.3746 15 18.5352 15 17.4996V2.49963C15 1.4641 14.1605 0.624634 13.125 0.624634Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M6.875 0.624634H7.8125C7.89538 0.624634 7.97487 0.657558 8.03347 0.716163C8.09208 0.774768 8.125 0.854254 8.125 0.937134C8.125 1.10289 8.19085 1.26187 8.30806 1.37908C8.42527 1.49629 8.58424 1.56213 8.75 1.56213H11.25C11.4158 1.56213 11.5747 1.49629 11.6919 1.37908C11.8092 1.26187 11.875 1.10289 11.875 0.937134C11.875 0.854254 11.9079 0.774768 11.9665 0.716163C12.0251 0.657558 12.1046 0.624634 12.1875 0.624634H13.125" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="20" height="20" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 1.0 KiB |
|
@ -0,0 +1,3 @@
|
|||
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.4633 12.6677C10.4421 12.6959 10.4187 12.723 10.393 12.7486L5.31228 17.8294C5.01939 18.1223 4.54451 18.1223 4.25162 17.8294C3.95873 17.5365 3.95873 17.0616 4.25162 16.7687L9.33237 11.688C9.35804 11.6623 9.3851 11.6389 9.41331 11.6177L9.02708 11.2315L6.4907 8.69511C6.27014 8.47455 6.15986 8.18967 6.15986 7.8956C6.15986 7.62909 6.25176 7.3534 6.44475 7.14203C7.35454 6.13116 8.67787 5.57058 10.038 5.62572L10.2309 5.62572C11.7381 5.62572 12.9695 4.40348 12.9695 2.88716L12.9695 2.2163C12.9695 1.91304 13.089 1.62816 13.3003 1.41679C13.7414 0.975682 14.4674 0.975682 14.9085 1.41679L20.5878 7.09609C20.7992 7.30745 20.9187 7.59233 20.9187 7.8956C20.9187 8.5205 20.404 9.03513 19.7883 9.03513L19.1175 9.03513C17.6012 9.03513 16.3789 10.2666 16.3789 11.7737L16.3789 11.9759L16.3789 11.9851C16.3789 13.3084 15.8459 14.5766 14.9085 15.5139C14.4674 15.955 13.7414 15.955 13.3003 15.5139L10.764 12.9684L10.4633 12.6677ZM9.97719 7.12449L10.0076 7.12572H10.038H10.2309C12.4943 7.12572 14.3564 5.34527 14.4645 3.09411L18.9105 7.54009C16.6594 7.64818 14.8789 9.51035 14.8789 11.7737V11.9759L14.8789 11.9851C14.8789 12.7842 14.5989 13.56 14.0918 14.1831L11.8265 11.9096L11.8246 11.9077L10.0877 10.1708L7.81241 7.8955C8.40491 7.3737 9.18393 7.09233 9.97719 7.12449Z" fill="black"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 1.4 KiB |
|
@ -0,0 +1,6 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.1875 10C7.70527 10 8.125 9.58027 8.125 9.0625C8.125 8.54473 7.70527 8.125 7.1875 8.125C6.66973 8.125 6.25 8.54473 6.25 9.0625C6.25 9.58027 6.66973 10 7.1875 10Z" fill="black"/>
|
||||
<path d="M10.0021 15.0011C8.22789 15.0011 6.7357 13.8476 6.26343 12.2734C6.25023 12.2266 6.24814 12.1773 6.25735 12.1295C6.26656 12.0817 6.28681 12.0367 6.31648 11.9981C6.34615 11.9595 6.38442 11.9284 6.42824 11.9072C6.47207 11.8861 6.52024 11.8754 6.5689 11.8761H13.4318C13.4805 11.8754 13.5286 11.8861 13.5725 11.9072C13.6163 11.9284 13.6545 11.9595 13.6842 11.9981C13.7139 12.0367 13.7341 12.0817 13.7433 12.1295C13.7526 12.1773 13.7505 12.2266 13.7373 12.2734C13.2689 13.8476 11.7763 15.0011 10.0021 15.0011Z" fill="black"/>
|
||||
<path d="M12.8125 10C13.3303 10 13.75 9.58027 13.75 9.0625C13.75 8.54473 13.3303 8.125 12.8125 8.125C12.2947 8.125 11.875 8.54473 11.875 9.0625C11.875 9.58027 12.2947 10 12.8125 10Z" fill="black"/>
|
||||
<path d="M10 18.125C14.4873 18.125 18.125 14.4873 18.125 10C18.125 5.51269 14.4873 1.875 10 1.875C5.51269 1.875 1.875 5.51269 1.875 10C1.875 14.4873 5.51269 18.125 10 18.125Z" stroke="black" stroke-width="1.5" stroke-miterlimit="10"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 1.2 KiB |
|
@ -0,0 +1,8 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10 1.87427C5.51289 1.87427 1.875 5.51216 1.875 9.99927C1.875 14.4864 5.51289 18.1243 10 18.1243C14.4871 18.1243 18.125 14.4864 18.125 9.99927C18.125 5.51216 14.4871 1.87427 10 1.87427Z" stroke="black" stroke-width="1.5" stroke-miterlimit="10"/>
|
||||
<path d="M9.9998 1.87427C7.73144 1.87427 5.59863 5.51216 5.59863 9.99927C5.59863 14.4864 7.73144 18.1243 9.9998 18.1243C12.2682 18.1243 14.401 14.4864 14.401 9.99927C14.401 5.51216 12.2682 1.87427 9.9998 1.87427Z" stroke="black" stroke-width="1.5" stroke-miterlimit="10"/>
|
||||
<path d="M4.5835 4.58264C6.07725 5.64319 7.95771 6.27561 10.0003 6.27561C12.0429 6.27561 13.9233 5.64319 15.4171 4.58264" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M15.4171 15.4172C13.9233 14.3567 12.0429 13.7242 10.0003 13.7242C7.95771 13.7242 6.07725 14.3567 4.5835 15.4172" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 1.87427V18.1243" stroke="black" stroke-width="1.5" stroke-miterlimit="10"/>
|
||||
<path d="M18.125 9.99902H1.875" stroke="black" stroke-width="1.5" stroke-miterlimit="10"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 1.2 KiB |
После Ширина: | Высота: | Размер: 10 KiB |
|
@ -0,0 +1,6 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.5446 4H2.55552C1.86214 4 1.30005 4.56209 1.30005 5.25547V13.3695C1.30005 14.0629 1.86214 14.625 2.55552 14.625H17.5446C18.238 14.625 18.8 14.0629 18.8 13.3695V5.25547C18.8 4.56209 18.238 4 17.5446 4Z" stroke="black" stroke-width="1.5" stroke-linejoin="round"/>
|
||||
<path d="M5.05005 16.5017H15.05" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
|
||||
<path d="M12.6966 9.32474L10.1233 6.75146L7.55005 9.32474" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10.123 11.4155V6.75146" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 751 B |
|
@ -0,0 +1,4 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.98676 4.37512C6.94223 4.37512 3.81918 6.13723 1.36058 9.66145C1.29041 9.76315 1.25195 9.88337 1.25007 10.0069C1.24819 10.1305 1.28298 10.2518 1.35004 10.3556C3.2391 13.3126 6.32035 15.6251 9.98676 15.6251C13.6133 15.6251 16.7578 13.3056 18.6504 10.3419C18.7159 10.2402 18.7507 10.1217 18.7507 10.0007C18.7507 9.8797 18.7159 9.76125 18.6504 9.6595C16.7536 6.72981 13.586 4.37512 9.98676 4.37512Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 13.1249C11.7259 13.1249 13.125 11.7258 13.125 9.99988C13.125 8.27399 11.7259 6.87488 10 6.87488C8.27411 6.87488 6.875 8.27399 6.875 9.99988C6.875 11.7258 8.27411 13.1249 10 13.1249Z" stroke="black" stroke-width="1.5" stroke-miterlimit="10"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 849 B |
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.3907 18.7495C15.2591 18.75 15.1308 18.709 15.0239 18.6323L10.0001 14.9901L4.97624 18.6323C4.86891 18.7102 4.7396 18.7519 4.60701 18.7514C4.47442 18.7509 4.34542 18.7083 4.23866 18.6296C4.1319 18.551 4.05291 18.4405 4.0131 18.314C3.9733 18.1875 3.97476 18.0517 4.01725 17.9261L5.97663 12.1225L0.898504 8.64012C0.788508 8.56477 0.70549 8.45623 0.661579 8.33034C0.617668 8.20445 0.615165 8.06782 0.654436 7.9404C0.693707 7.81299 0.772694 7.70147 0.879856 7.62215C0.987018 7.54282 1.11674 7.49985 1.25007 7.4995H7.51491L9.40553 1.68114C9.44626 1.55552 9.52573 1.44603 9.63254 1.36838C9.73935 1.29073 9.86801 1.2489 10.0001 1.2489C10.1321 1.2489 10.2608 1.29073 10.3676 1.36838C10.4744 1.44603 10.5539 1.55552 10.5946 1.68114L12.4852 7.50145H18.7501C18.8836 7.50138 19.0136 7.54406 19.121 7.62324C19.2285 7.70241 19.3078 7.81392 19.3474 7.94143C19.3869 8.06894 19.3845 8.20575 19.3407 8.33183C19.2968 8.45791 19.2137 8.56663 19.1036 8.64207L14.0235 12.1225L15.9817 17.9245C16.0134 18.0184 16.0224 18.1186 16.0077 18.2166C15.9931 18.3147 15.9554 18.4079 15.8976 18.4885C15.8399 18.5691 15.7638 18.6348 15.6757 18.6802C15.5875 18.7256 15.4898 18.7493 15.3907 18.7495Z" fill="black"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 1.3 KiB |
|
@ -0,0 +1,6 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1.25 16.2307L5.9375 3.73071L10.625 16.2307" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M8.98437 11.8555H2.89062" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12.7344 9.35437C13.2105 8.23367 14.3359 7.47937 15.625 7.47937C17.4219 7.47937 18.75 8.72937 18.75 10.6044V16.2294" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12.5 14.0035C12.5 15.4098 13.5492 16.2692 14.8437 16.2692C16.9531 16.2692 18.75 15.2145 18.75 12.1285V11.5426C17.9687 11.5426 16.4844 11.5817 15.1562 11.7379C13.8762 11.8887 12.5 12.4801 12.5 14.0035Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 862 B |
|
@ -0,0 +1,12 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0)">
|
||||
<path d="M12.5 14.3674H15.4687C17.6172 14.3674 19.375 13.2264 19.375 11.1018C19.375 8.9772 17.3047 7.91938 15.625 7.83618C15.2777 4.51352 12.8516 2.49243 10 2.49243C7.30469 2.49243 5.56875 4.2811 5 6.05493C2.65625 6.27759 0.625 7.76899 0.625 10.2112C0.625 12.6534 2.73437 14.3674 5.3125 14.3674H7.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12.5 9.99158L10 7.49158L7.5 9.99158" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10 17.5088V8.11743" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0">
|
||||
<rect width="20" height="20" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 855 B |
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M17.7143 4H2.03262C1.46569 4 1 4.46569 1 5.03262V14.5388C1 15.1057 1.46569 15.5714 2.03262 15.5714H6.49719C7.05399 15.5714 7.53993 15.2171 7.71204 14.6907L8.77503 11.5118C9.16985 10.3375 10.82 10.3375 11.2149 11.5118L12.2778 14.6907C12.4499 15.2171 12.946 15.5714 13.5028 15.5714H17.9674C18.5343 15.5714 19 15.1057 19 14.5388V5.28572C19 4.57705 18.4229 4 17.7143 4ZM6.47694 11.4713C4.69516 12.3622 2.92351 10.6007 3.8144 8.80878C3.96625 8.49494 4.21935 8.24184 4.53318 8.08999C6.31496 7.1991 8.08662 8.96063 7.19573 10.7525C7.03375 11.0664 6.78065 11.3195 6.47694 11.4713ZM15.4769 11.4713C13.6952 12.3622 11.9235 10.6007 12.8144 8.80878C12.9663 8.49494 13.2193 8.24184 13.5332 8.08999C15.315 7.1991 17.0866 8.96063 16.1957 10.7525C16.0337 11.0664 15.7807 11.3195 15.4769 11.4713Z" fill="black"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 908 B |
|
@ -0,0 +1,4 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M14.6402 12.0614L17.8711 14.3356C17.9662 14.3779 18.0705 14.3958 18.1743 14.3876C18.2781 14.3794 18.3782 14.3454 18.4655 14.2886C18.5529 14.2319 18.6246 14.1542 18.6743 14.0627C18.724 13.9712 18.75 13.8687 18.75 13.7645V6.23486C18.75 6.13072 18.724 6.02823 18.6743 5.93671C18.6246 5.84518 18.5529 5.76752 18.4655 5.71078C18.3782 5.65404 18.2781 5.62002 18.1743 5.61181C18.0705 5.6036 17.9662 5.62146 17.8711 5.66376L14.6402 7.93798C14.5583 7.99565 14.4914 8.07217 14.4453 8.16109C14.3991 8.25001 14.375 8.34873 14.375 8.44892V11.5505C14.375 11.6507 14.3991 11.7494 14.4453 11.8383C14.4914 11.9272 14.5583 12.0037 14.6402 12.0614Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M10.4687 14.9985H3.28125C2.743 14.997 2.22725 14.7825 1.84665 14.4019C1.46605 14.0213 1.25155 13.5055 1.25 12.9673V7.02979C1.25155 6.49154 1.46605 5.97578 1.84665 5.59518C2.22725 5.21458 2.743 5.00008 3.28125 4.99854H10.4875C11.0207 5.00018 11.5317 5.21274 11.9087 5.5898C12.2858 5.96686 12.4983 6.47779 12.5 7.01104V12.9673C12.4985 13.5055 12.2839 14.0213 11.9034 14.4019C11.5228 14.7825 11.007 14.997 10.4687 14.9985Z" stroke="black" stroke-width="1.5" stroke-miterlimit="10"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 1.3 KiB |
|
@ -0,0 +1,6 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.92187 7.50114H2.1875C2.10462 7.50114 2.02513 7.53406 1.96653 7.59267C1.90792 7.65127 1.875 7.73076 1.875 7.81364V12.1886C1.875 12.2715 1.90792 12.351 1.96653 12.4096C2.02513 12.4682 2.10462 12.5011 2.1875 12.5011H4.9082C5.05226 12.5 5.19225 12.5489 5.3043 12.6394L8.87734 15.5648C8.92386 15.599 8.97894 15.6197 9.03647 15.6245C9.09401 15.6293 9.15176 15.6181 9.2033 15.592C9.25485 15.566 9.29818 15.5262 9.32849 15.4771C9.35879 15.428 9.37489 15.3714 9.375 15.3136V4.68864C9.37489 4.6309 9.35879 4.57432 9.32849 4.52518C9.29818 4.47603 9.25485 4.43624 9.2033 4.41023C9.15176 4.38421 9.09401 4.37299 9.03647 4.37779C8.97894 4.3826 8.92386 4.40326 8.87734 4.43747L5.3043 7.36286C5.19742 7.45313 5.06177 7.50218 4.92187 7.50114Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M12.5 12.4995C12.8805 11.7425 13.125 10.9042 13.125 9.99951C13.125 9.08232 12.8906 8.26436 12.5 7.49951" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M14.3748 14.3744C15.1357 13.0494 15.6248 11.872 15.6248 9.99939C15.6248 8.12673 15.156 6.96267 14.3748 5.62439" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path d="M16.25 16.2484C17.4219 14.4515 18.125 12.6769 18.125 9.99841C18.125 7.3199 17.4219 5.58435 16.25 3.74841" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 1.5 KiB |
|
@ -0,0 +1,8 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M16.25 16.8757L2.5 3.12573" stroke="black" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"/>
|
||||
<path d="M8.75002 5.34856V6.66887C8.75009 6.71019 8.76652 6.74979 8.79572 6.77903L9.73322 7.71653C9.75505 7.73838 9.78287 7.75327 9.81315 7.75932C9.84344 7.76538 9.87485 7.76231 9.9034 7.75053C9.93195 7.73874 9.95636 7.71875 9.97356 7.6931C9.99076 7.66744 9.99996 7.63726 10 7.60637V4.70989C10.0018 4.53697 9.95667 4.3668 9.86954 4.21743C9.78241 4.06806 9.65647 3.94505 9.5051 3.86145C9.34909 3.77748 9.17241 3.73961 8.99569 3.75226C8.81897 3.76492 8.6495 3.82758 8.50705 3.93293C8.49813 3.93914 8.48952 3.94579 8.48127 3.95286L7.23361 4.97434C7.21676 4.98818 7.20299 5.00539 7.19318 5.02487C7.18338 5.04436 7.17777 5.06567 7.1767 5.08745C7.17563 5.10924 7.17914 5.131 7.18699 5.15135C7.19484 5.17169 7.20686 5.19017 7.22228 5.20559L7.8883 5.872C7.91575 5.89945 7.95244 5.91569 7.99122 5.91757C8.03 5.91945 8.06809 5.90682 8.09806 5.88215L8.75002 5.34856Z" fill="black"/>
|
||||
<path d="M8.75 14.6517L5.70039 12.1548C5.4765 11.973 5.19662 11.8742 4.9082 11.8751H2.5V8.12512H4.48125C4.51214 8.12507 4.54232 8.11586 4.56797 8.09867C4.59363 8.08147 4.61362 8.05705 4.62541 8.0285C4.63719 7.99995 4.64026 7.96855 4.6342 7.93826C4.62815 7.90797 4.61326 7.88015 4.59141 7.85832L3.65391 6.92083C3.62467 6.89163 3.58507 6.87519 3.54375 6.87512H2.1875C1.93886 6.87512 1.7004 6.97389 1.52459 7.14971C1.34877 7.32552 1.25 7.56398 1.25 7.81262V12.1876C1.25 12.4363 1.34877 12.6747 1.52459 12.8505C1.7004 13.0263 1.93886 13.1251 2.1875 13.1251H4.9125L8.48125 16.047C8.4895 16.0541 8.49811 16.0607 8.50703 16.0669C8.65125 16.1737 8.82315 16.2367 9.00221 16.2484C9.18126 16.2601 9.3599 16.22 9.5168 16.1329C9.66511 16.0485 9.78812 15.9259 9.87309 15.7779C9.95805 15.6298 10.0019 15.4618 10 15.2911V13.3314C9.99993 13.2901 9.98349 13.2504 9.9543 13.2212L9.0168 12.2837C8.99497 12.2619 8.96715 12.247 8.93686 12.2409C8.90657 12.2349 8.87517 12.2379 8.84662 12.2497C8.81807 12.2615 8.79365 12.2815 8.77645 12.3071C8.75926 12.3328 8.75005 12.363 8.75 12.3939V14.6517Z" fill="black"/>
|
||||
<path d="M13.75 10.0005C13.75 9.04112 13.523 8.13019 13.0566 7.21652C12.9795 7.07199 12.8488 6.9635 12.6925 6.91438C12.5363 6.86527 12.367 6.87945 12.2211 6.95389C12.0752 7.02832 11.9643 7.15706 11.9124 7.3124C11.8604 7.46773 11.8716 7.63725 11.9433 7.78448C12.3179 8.51847 12.5 9.24347 12.5 10.0005C12.5 10.1047 12.4959 10.2105 12.4879 10.3181C12.4845 10.3629 12.4909 10.4079 12.5065 10.45C12.5222 10.4922 12.5467 10.5304 12.5785 10.5622L13.3464 11.3306C13.3663 11.3506 13.3912 11.3648 13.4186 11.3718C13.4459 11.3787 13.4746 11.3782 13.5016 11.3702C13.5286 11.3622 13.553 11.347 13.5721 11.3263C13.5912 11.3055 13.6043 11.28 13.6101 11.2525C13.7025 10.8415 13.7494 10.4217 13.75 10.0005Z" fill="black"/>
|
||||
<path d="M16.2498 10.001C16.2498 8.00137 15.7388 6.72403 14.9146 5.31114C14.83 5.17027 14.6933 5.06842 14.5341 5.02762C14.3749 4.98683 14.206 5.01037 14.064 5.09317C13.9221 5.17596 13.8184 5.31134 13.7756 5.46999C13.7327 5.62864 13.754 5.79779 13.8349 5.94082C14.5728 7.20567 14.9998 8.27559 14.9998 10.001C14.9998 10.9318 14.8713 11.676 14.6338 12.3701C14.6147 12.4255 14.6115 12.485 14.6246 12.5421C14.6378 12.5991 14.6666 12.6513 14.708 12.6928L15.3631 13.3475C15.3812 13.3656 15.4034 13.3791 15.428 13.3866C15.4525 13.3941 15.4785 13.3955 15.5036 13.3906C15.5288 13.3857 15.5524 13.3746 15.5723 13.3585C15.5922 13.3423 15.6078 13.3215 15.6177 13.2979C16.0189 12.34 16.2498 11.3256 16.2498 10.001Z" fill="black"/>
|
||||
<path d="M18.7499 10.0003C18.7499 7.09956 17.9612 5.26949 16.7768 3.41402C16.6876 3.27416 16.5465 3.17546 16.3846 3.13964C16.2226 3.10382 16.053 3.1338 15.9132 3.223C15.7733 3.3122 15.6746 3.45331 15.6388 3.61528C15.603 3.77725 15.6329 3.94681 15.7221 4.08667C16.7897 5.75738 17.4999 7.40269 17.4999 10.0003C17.4999 11.8539 17.1522 13.2082 16.5784 14.4144C16.5644 14.4435 16.5598 14.4762 16.5652 14.508C16.5706 14.5399 16.5857 14.5692 16.6085 14.5921L17.3046 15.289C17.322 15.3065 17.3433 15.3197 17.3667 15.3274C17.3902 15.3351 17.4151 15.3371 17.4395 15.3333C17.4639 15.3295 17.4871 15.3199 17.5071 15.3054C17.5271 15.291 17.5433 15.2719 17.5546 15.25C18.3936 13.6027 18.7499 11.9925 18.7499 10.0003Z" fill="black"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 4.2 KiB |
|
@ -0,0 +1,3 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9.28296 7.49816H6.56226C6.47938 7.49816 6.39989 7.53108 6.34128 7.58969C6.28268 7.64829 6.24976 7.72778 6.24976 7.81066V12.1857C6.24976 12.2685 6.28268 12.348 6.34128 12.4066C6.39989 12.4652 6.47938 12.4982 6.56226 12.4982H9.28296C9.42741 12.4982 9.56737 12.5483 9.67905 12.64L13.2521 15.5696C13.2987 15.6039 13.3539 15.6246 13.4115 15.6293C13.4692 15.6341 13.527 15.6228 13.5786 15.5966C13.6302 15.5705 13.6735 15.5305 13.7037 15.4812C13.7339 15.4319 13.7499 15.3751 13.7498 15.3173V4.67902C13.7497 4.62125 13.7337 4.56462 13.7034 4.51542C13.6731 4.46621 13.6298 4.42637 13.5782 4.40031C13.5267 4.37424 13.4689 4.36298 13.4113 4.36778C13.3538 4.37257 13.2986 4.39323 13.2521 4.42746L9.67905 7.35715C9.56727 7.44848 9.42731 7.49831 9.28296 7.49816Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 946 B |
|
@ -0,0 +1,9 @@
|
|||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.8375 5.21279L5.21265 7.83765L8.26508 10.8901L10.8899 8.26522L7.8375 5.21279Z" fill="black"/>
|
||||
<path d="M11.7738 9.1488L9.14917 11.7738L16.0937 18.75L18.7499 16.0937L11.7738 9.1488Z" fill="black"/>
|
||||
<path d="M4.375 6.87463H1.25V8.12463H4.375V6.87463Z" fill="black"/>
|
||||
<path d="M3.52548 2.64187L2.6416 3.52576L4.85131 5.73546L5.73519 4.85158L3.52548 2.64187Z" fill="black"/>
|
||||
<path d="M8.125 1.25037H6.875V4.37537H8.125V1.25037Z" fill="black"/>
|
||||
<path d="M11.48 2.64259L9.27026 4.85229L10.1541 5.73618L12.3639 3.52647L11.48 2.64259Z" fill="black"/>
|
||||
<path d="M4.85107 9.27064L2.64136 11.4803L3.52524 12.3642L5.73495 10.1545L4.85107 9.27064Z" fill="black"/>
|
||||
</svg>
|
После Ширина: | Высота: | Размер: 764 B |
|
@ -3,6 +3,8 @@ import PropTypes from "prop-types";
|
|||
import classNames from "classnames";
|
||||
import styles from "./Button.scss";
|
||||
|
||||
export const presets = ["basic", "accept", "cancel", "red", "orange", "green", "blue", "purple"];
|
||||
|
||||
export function Button({ preset, className, children, ...rest }) {
|
||||
return (
|
||||
<button className={classNames(styles.button, styles[preset], className)} {...rest}>
|
||||
|
@ -12,7 +14,7 @@ export function Button({ preset, className, children, ...rest }) {
|
|||
}
|
||||
|
||||
Button.propTypes = {
|
||||
preset: PropTypes.string,
|
||||
preset: PropTypes.oneOf(presets),
|
||||
className: PropTypes.string,
|
||||
children: PropTypes.node
|
||||
};
|
||||
|
|
|
@ -22,7 +22,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
:local(.accept) {
|
||||
:local(.accept), :local(.green) {
|
||||
color: $white;
|
||||
background-color: $green;
|
||||
|
||||
|
@ -35,7 +35,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
:local(.cancel) {
|
||||
:local(.cancel), :local(.red) {
|
||||
color: $white;
|
||||
background-color: $red;
|
||||
|
||||
|
|
|
@ -1,62 +1,25 @@
|
|||
import React from "react";
|
||||
import { withDesign } from "storybook-addon-designs";
|
||||
import { Button } from "./Button";
|
||||
import { Button, presets } from "./Button";
|
||||
|
||||
export default {
|
||||
title: "Button",
|
||||
decorators: [withDesign]
|
||||
};
|
||||
|
||||
export const Basic = () => <Button>Text</Button>;
|
||||
export const AllButtons = ({ selected }) => (
|
||||
<>
|
||||
{presets.map(preset => (
|
||||
<Button preset={preset} selected={selected}>
|
||||
{preset}
|
||||
</Button>
|
||||
))}
|
||||
</>
|
||||
);
|
||||
|
||||
Basic.parameters = {
|
||||
AllButtons.parameters = {
|
||||
design: {
|
||||
type: "figma",
|
||||
url: "https://www.figma.com/file/Xag5qaEgYs3KzXvoxx5m8y/Hubs-Redesign?node-id=70%3A2186"
|
||||
}
|
||||
};
|
||||
|
||||
export const Accept = () => <Button preset="accept">Accept</Button>;
|
||||
|
||||
Accept.parameters = {
|
||||
design: {
|
||||
type: "figma",
|
||||
url: "https://www.figma.com/file/Xag5qaEgYs3KzXvoxx5m8y/Hubs-Redesign?node-id=69%3A4742"
|
||||
}
|
||||
};
|
||||
|
||||
export const Cancel = () => <Button preset="cancel">Cancel</Button>;
|
||||
|
||||
Cancel.parameters = {
|
||||
design: {
|
||||
type: "figma",
|
||||
url: "https://www.figma.com/file/Xag5qaEgYs3KzXvoxx5m8y/Hubs-Redesign?node-id=70%3A2134"
|
||||
}
|
||||
};
|
||||
|
||||
export const Blue = () => <Button preset="blue">Blue</Button>;
|
||||
|
||||
Blue.parameters = {
|
||||
design: {
|
||||
type: "figma",
|
||||
url: "https://www.figma.com/file/Xag5qaEgYs3KzXvoxx5m8y/Hubs-Redesign?node-id=70%3A2134"
|
||||
}
|
||||
};
|
||||
|
||||
export const Orange = () => <Button preset="orange">Orange</Button>;
|
||||
|
||||
Orange.parameters = {
|
||||
design: {
|
||||
type: "figma",
|
||||
url: "https://www.figma.com/file/Xag5qaEgYs3KzXvoxx5m8y/Hubs-Redesign?node-id=70%3A2134"
|
||||
}
|
||||
};
|
||||
|
||||
export const Purple = () => <Button preset="purple">Purple</Button>;
|
||||
|
||||
Purple.parameters = {
|
||||
design: {
|
||||
type: "figma",
|
||||
url: "https://www.figma.com/file/Xag5qaEgYs3KzXvoxx5m8y/Hubs-Redesign?node-id=70%3A2134"
|
||||
}
|
||||
};
|
||||
|
|
|
@ -1,11 +1,13 @@
|
|||
|
||||
@import "~normalize.css";
|
||||
@import "./theme.scss";
|
||||
|
||||
/**
|
||||
* https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
|
||||
*/
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
*, *:before, *:after {
|
||||
|
@ -158,3 +160,8 @@ video {
|
|||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
label {
|
||||
font-size: $font-size-small;
|
||||
font-weight: $font-weight-bold;
|
||||
}
|
|
@ -41,3 +41,6 @@ $blue-pressed: #1094D5;
|
|||
$purple: #7854F6;
|
||||
$purple-hover: #8C6EF7;
|
||||
$purple-pressed: #663DF5;
|
||||
|
||||
$font-size-small: 12px;
|
||||
$font-weight-bold: 700;
|
||||
|
|
|
@ -0,0 +1,26 @@
|
|||
import React from "react";
|
||||
import { withDesign } from "storybook-addon-designs";
|
||||
import { ReactComponent as ShareIcon } from "../icons/Share.svg";
|
||||
import { ToolbarButton, presets } from "./ToolbarButton";
|
||||
|
||||
export default {
|
||||
title: "Toolbar",
|
||||
decorators: [withDesign],
|
||||
argTypes: {
|
||||
selected: { control: "boolean" }
|
||||
}
|
||||
};
|
||||
|
||||
export const AllButtons = ({ selected }) => (
|
||||
<>
|
||||
{presets.map(preset => <ToolbarButton icon={<ShareIcon />} label={preset} preset={preset} selected={selected} />)}
|
||||
</>
|
||||
);
|
||||
|
||||
AllButtons.parameters = {
|
||||
design: {
|
||||
type: "figma",
|
||||
url: "https://www.figma.com/file/Xag5qaEgYs3KzXvoxx5m8y/Hubs-Redesign?node-id=17%3A725"
|
||||
},
|
||||
selected: false
|
||||
};
|
|
@ -0,0 +1,30 @@
|
|||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import classNames from "classnames";
|
||||
import styles from "./ToolbarButton.scss";
|
||||
|
||||
export const presets = ["basic", "accept", "cancel", "red", "orange", "green", "blue", "purple"];
|
||||
|
||||
export function ToolbarButton({ preset, className, icon, label, selected, ...rest }) {
|
||||
return (
|
||||
<button
|
||||
className={classNames(styles.toolbarButton, styles[preset], { [styles.selected]: selected }, className)}
|
||||
{...rest}
|
||||
>
|
||||
<div className={styles.iconContainer}>{icon}</div>
|
||||
<label>{label}</label>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
ToolbarButton.propTypes = {
|
||||
icon: PropTypes.node,
|
||||
label: PropTypes.string,
|
||||
selected: PropTypes.bool,
|
||||
preset: PropTypes.oneOf(presets),
|
||||
className: PropTypes.string
|
||||
};
|
||||
|
||||
ToolbarButton.defaultProps = {
|
||||
preset: "basic"
|
||||
};
|
|
@ -0,0 +1,481 @@
|
|||
@import '../styles/theme';
|
||||
|
||||
:local(.toolbarButton) {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
label {
|
||||
color: black;
|
||||
margin-top: 8px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
label {
|
||||
color: $black-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
label {
|
||||
color: $black-pressed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:local(.iconContainer) {
|
||||
border-radius: 9999px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border: 1px solid $transparent;
|
||||
background-color: $transparent;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: white;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:local(.basic) {
|
||||
:local(.iconContainer) {
|
||||
border-color: $darkgrey;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: #000;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover :local(.iconContainer) {
|
||||
border-color: transparent;
|
||||
background-color: $white-hover;
|
||||
}
|
||||
|
||||
&:active :local(.iconContainer) {
|
||||
border-color: transparent;
|
||||
background-color: $white-pressed;
|
||||
}
|
||||
|
||||
&:local(.selected) {
|
||||
:local(.iconContainer) {
|
||||
border-color: transparent;
|
||||
background-color: $lightgrey;
|
||||
}
|
||||
|
||||
label {
|
||||
color: $darkgrey;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
:local(.iconContainer) {
|
||||
background-color: $lightgrey-hover;
|
||||
}
|
||||
|
||||
label {
|
||||
color: $darkgrey-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
:local(.iconContainer) {
|
||||
background-color: $lightgrey-pressed;
|
||||
}
|
||||
|
||||
label {
|
||||
color: $darkgrey-pressed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:local(.accept), :local(.green) {
|
||||
:local(.iconContainer) {
|
||||
background-color: $green;
|
||||
}
|
||||
|
||||
&:hover :local(.iconContainer) {
|
||||
background-color: $green-hover;
|
||||
}
|
||||
|
||||
&:active :local(.iconContainer) {
|
||||
background-color: $green-pressed;
|
||||
}
|
||||
|
||||
&:local(.selected) {
|
||||
:local(.iconContainer) {
|
||||
border-color: $green;
|
||||
background-color: transparent;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: $green;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: $green;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: $green;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
:local(.iconContainer) {
|
||||
border-color: $green-hover;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: $green-hover;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: $green-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: $green-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
:local(.iconContainer) {
|
||||
border-color: $green-pressed;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: $green-pressed;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: $green-pressed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: $green-pressed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:local(.cancel), :local(.red) {
|
||||
:local(.iconContainer) {
|
||||
background-color: $red;
|
||||
}
|
||||
|
||||
&:hover :local(.iconContainer) {
|
||||
background-color: $red-hover;
|
||||
}
|
||||
|
||||
&:active :local(.iconContainer) {
|
||||
background-color: $red-pressed;
|
||||
}
|
||||
|
||||
&:local(.selected) {
|
||||
:local(.iconContainer) {
|
||||
border-color: $red;
|
||||
background-color: transparent;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: $red;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: $red;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
:local(.iconContainer) {
|
||||
border-color: $red-hover;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: $red-hover;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: $red-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: $red-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
:local(.iconContainer) {
|
||||
border-color: $red-pressed;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: $red-pressed;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: $red-pressed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: $red-pressed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:local(.blue) {
|
||||
:local(.iconContainer) {
|
||||
background-color: $blue;
|
||||
}
|
||||
|
||||
&:hover :local(.iconContainer) {
|
||||
background-color: $blue-hover;
|
||||
}
|
||||
|
||||
&:active :local(.iconContainer) {
|
||||
background-color: $blue-pressed;
|
||||
}
|
||||
|
||||
&:local(.selected) {
|
||||
:local(.iconContainer) {
|
||||
border-color: $blue;
|
||||
background-color: transparent;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: $blue;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: $blue;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
:local(.iconContainer) {
|
||||
border-color: $blue-hover;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: $blue-hover;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: $blue-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: $blue-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
:local(.iconContainer) {
|
||||
border-color: $blue-pressed;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: $blue-pressed;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: $blue-pressed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: $blue-pressed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
:local(.orange) {
|
||||
:local(.iconContainer) {
|
||||
background-color: $orange;
|
||||
}
|
||||
|
||||
&:hover :local(.iconContainer) {
|
||||
background-color: $orange-hover;
|
||||
}
|
||||
|
||||
&:active :local(.iconContainer) {
|
||||
background-color: $orange-pressed;
|
||||
}
|
||||
|
||||
&:local(.selected) {
|
||||
:local(.iconContainer) {
|
||||
border-color: $orange;
|
||||
background-color: transparent;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: $orange;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: $orange;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: $orange;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
:local(.iconContainer) {
|
||||
border-color: $orange-hover;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: $orange-hover;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: $orange-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: $orange-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
:local(.iconContainer) {
|
||||
border-color: $orange-pressed;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: $orange-pressed;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: $orange-pressed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: $orange-pressed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:local(.purple) {
|
||||
:local(.iconContainer) {
|
||||
background-color: $purple;
|
||||
}
|
||||
|
||||
&:hover :local(.iconContainer) {
|
||||
background-color: $purple-hover;
|
||||
}
|
||||
|
||||
&:active :local(.iconContainer) {
|
||||
background-color: $purple-pressed;
|
||||
}
|
||||
|
||||
&:local(.selected) {
|
||||
:local(.iconContainer) {
|
||||
border-color: $purple;
|
||||
background-color: transparent;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: $purple;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: $purple;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: $purple;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
:local(.iconContainer) {
|
||||
border-color: $purple-hover;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: $purple-hover;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: $purple-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: $purple-hover;
|
||||
}
|
||||
}
|
||||
|
||||
&:active {
|
||||
:local(.iconContainer) {
|
||||
border-color: $purple-pressed;
|
||||
|
||||
svg {
|
||||
*[stroke=\#000] {
|
||||
stroke: $purple-pressed;
|
||||
}
|
||||
|
||||
*[fill=\#000] {
|
||||
fill: $purple-pressed;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
color: $purple-pressed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -382,6 +382,20 @@ module.exports = async (env, argv) => {
|
|||
"sass-loader"
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.svg$/,
|
||||
include: [path.resolve(__dirname, "src", "react-components")],
|
||||
use: [
|
||||
{
|
||||
loader: "@svgr/webpack",
|
||||
options: {
|
||||
replaceAttrValues: { "#000": "{props.color}" },
|
||||
template: require("./src/react-components/icons/IconTemplate")
|
||||
}
|
||||
},
|
||||
"url-loader"
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpg|gif|glb|ogg|mp3|mp4|wav|woff2|svg|webm)$/,
|
||||
use: {
|
||||
|
|