From 7b1e2d2550a258e77a81120d6fde2bdede3c395e Mon Sep 17 00:00:00 2001 From: dthill <dthill@gmx.net> Date: Wed, 19 Jun 2019 09:43:18 +0200 Subject: [PATCH] feature(Icons): add Lens Icons --- src/lib/assets/images/PasswordLens.svg | 33 ++++++++++++++++++++++ src/lib/assets/images/SelectedLens.svg | 32 +++++++++++++++++++++ src/lib/assets/images/UnselectedLens.svg | 31 ++++++++++++++++++++ src/lib/components/Icons/PasswordLens.js | 24 ++++++++++++++++ src/lib/components/Icons/SelectedLens.js | 27 ++++++++++++++++++ src/lib/components/Icons/UnselectedLens.js | 24 ++++++++++++++++ src/lib/components/Icons/index.js | 6 ++++ src/lib/index.js | 3 ++ 8 files changed, 180 insertions(+) create mode 100644 src/lib/assets/images/PasswordLens.svg create mode 100644 src/lib/assets/images/SelectedLens.svg create mode 100644 src/lib/assets/images/UnselectedLens.svg create mode 100644 src/lib/components/Icons/PasswordLens.js create mode 100644 src/lib/components/Icons/SelectedLens.js create mode 100644 src/lib/components/Icons/UnselectedLens.js diff --git a/src/lib/assets/images/PasswordLens.svg b/src/lib/assets/images/PasswordLens.svg new file mode 100644 index 0000000..2bbad8c --- /dev/null +++ b/src/lib/assets/images/PasswordLens.svg @@ -0,0 +1,33 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg width="30px" height="36px" viewBox="0 0 30 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch --> + <title>Group</title> + <desc>Created with Sketch.</desc> + <defs></defs> + <g id="Agentur-" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="Agentur-2.1.-Registrierung---Fehlendes-Feld" transform="translate(-397.000000, -588.000000)"> + <g id="Container" transform="translate(20.000000, 120.000000)"> + <g id="Zweier-Gruppe" transform="translate(20.000000, 453.000000)"> + <g id="Group-3" transform="translate(97.000000, 5.000000)"> + <g id="Group" transform="translate(250.000000, 0.000000)"> + <g id="Atom/Shape/Pin-Border/Blue"> + <g id="Atom/Shape/Pin-Border-Blue"> + <g id="Group"> + <circle id="Oval-2" cx="25" cy="12.5" r="12.5"></circle> + <circle id="Oval-2" cx="37.5" cy="25" r="12.5"></circle> + <circle id="Oval-2" cx="12.5" cy="25" r="12.5"></circle> + <circle id="Oval-2" cx="25" cy="37.5" r="12.5"></circle> + </g> + <path d="M25.1384519,44.2600581 C25.6442544,43.9540228 26.2471408,43.5600417 26.8923895,43.1055709 C28.6912784,41.8385516 30.4933869,40.3397396 32.127409,38.6641752 C34.2044671,36.5343113 35.8633142,34.2667982 36.9708261,31.8967338 C38.2619806,29.1336759 38.7658223,26.3116278 38.3666941,23.4373324 C37.3986197,16.4658087 31.836318,11.5 24.961391,11.5 C18.107855,11.5 12.6263164,16.4392727 11.6493125,23.4380467 C11.2030731,26.6346855 11.7647534,29.681082 13.1941638,32.5877495 C14.4008894,35.0415932 16.1909938,37.327106 18.418067,39.430476 C19.9487467,40.8761339 21.5861087,42.1449427 23.2568779,43.2562496 C23.8214789,43.6317923 24.3336372,43.9523753 24.8546241,44.2638957 C24.8898305,44.2849472 24.9397711,44.3146362 24.9938092,44.3466958 C25.0399111,44.3193776 25.0882506,44.2904323 25.1384519,44.2600581 Z M39.3571901,23.2997909 C41.1793249,36.4217742 24.9628789,45.6115735 24.9628789,45.4989766 C24.9628789,45.3863798 8.73211121,37.1024692 10.6589159,23.2997909 C11.696879,15.8643357 17.552708,10.5 24.961391,10.5 C32.370074,10.5 38.3253186,15.868837 39.3571901,23.2997909 Z" fill="#4A90E2" fill-rule="nonzero"></path> + </g> + </g> + <g id="Atom/Background/Oval-Blue" transform="translate(15.000000, 15.000000)" fill="#4A90E2" stroke="#FFFFFF"> + <circle cx="10.5" cy="10.5" r="10"></circle> + </g> + </g> + </g> + </g> + </g> + </g> + </g> +</svg> \ No newline at end of file diff --git a/src/lib/assets/images/SelectedLens.svg b/src/lib/assets/images/SelectedLens.svg new file mode 100644 index 0000000..7abb6f2 --- /dev/null +++ b/src/lib/assets/images/SelectedLens.svg @@ -0,0 +1,32 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg width="35px" height="42px" viewBox="0 0 35 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch --> + <title>Group</title> + <desc>Created with Sketch.</desc> + <defs> + <rect id="path-1" x="0" y="0" width="60" height="60"></rect> + </defs> + <g id="Agentur-" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="Agentur-2.-Registrierung" transform="translate(-423.000000, -673.000000)"> + <g id="Checkbox" transform="translate(410.000000, 660.000000)"> + <g id="Group"> + <g id="Atom/Shape/Pin-Border/Green"> + <mask id="mask-2" fill="white"> + <use xlink:href="#path-1"></use> + </mask> + <g id="Background"></g> + <g stroke-width="1" fill-rule="evenodd" mask="url(#mask-2)"> + <g id="Group"> + <circle id="Oval-2" cx="30" cy="15" r="15"></circle> + <circle id="Oval-2" cx="45" cy="30" r="15"></circle> + <circle id="Oval-2" cx="15" cy="30" r="15"></circle> + <circle id="Oval-2" cx="30" cy="45" r="15"></circle> + </g> + <path d="M30.5661423,53.5120697 C31.1731053,53.1448273 31.896569,52.67205 32.6708674,52.1266851 C34.8295341,50.606262 36.9920643,48.8076875 38.9528907,46.7970103 C41.4453605,44.2411736 43.4359771,41.5201579 44.7649913,38.6760805 C46.3143768,35.3604111 46.9189868,31.9739534 46.4400329,28.5247989 C45.2783436,20.1589704 38.6035816,14.2 30.3536692,14.2 C22.129426,14.2 15.5515797,20.1271273 14.379175,28.5256561 C13.8436877,32.3616226 14.517704,36.0172984 16.2329966,39.5052994 C17.6810673,42.4499119 19.8291926,45.1925272 22.5016803,47.7165712 C24.3384961,49.4513607 26.3033304,50.9739312 28.3082535,52.3074996 C28.9857746,52.7581507 29.6003647,53.1428504 30.2255489,53.5166749 C30.2677966,53.5419367 30.3277254,53.5775635 30.392571,53.6160349 C30.4478933,53.5832531 30.5059008,53.5485187 30.5661423,53.5120697 Z M47.6286281,28.3597491 C49.8151899,44.106129 30.3554546,55.1338882 30.3554546,54.998772 C30.3554546,54.8636557 10.8785335,44.922963 13.1906991,28.3597491 C14.4362548,19.4372028 21.4632496,13 30.3536692,13 C39.2440888,13 46.3903824,19.4426044 47.6286281,28.3597491 Z" fill="#1CB569" fill-rule="nonzero"></path> + </g> + </g> + </g> + </g> + </g> + </g> +</svg> \ No newline at end of file diff --git a/src/lib/assets/images/UnselectedLens.svg b/src/lib/assets/images/UnselectedLens.svg new file mode 100644 index 0000000..4d9eac5 --- /dev/null +++ b/src/lib/assets/images/UnselectedLens.svg @@ -0,0 +1,31 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg width="36px" height="43px" viewBox="0 0 36 43" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch --> + <title>Group</title> + <desc>Created with Sketch.</desc> + <defs></defs> + <g id="Agentur-" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> + <g id="Agentur-2.1.-Registrierung---Fehlendes-Feld" transform="translate(-422.000000, -737.000000)"> + <g id="Container" transform="translate(20.000000, 120.000000)"> + <g id="Checkbox" transform="translate(390.000000, 605.000000)"> + <g id="Group"> + <g id="Atom/Shape/Pin-Border/Blue"> + <g id="Atom/Shape/Pin-Border-Blue"> + <g id="Group"> + <circle id="Oval-2" cx="30" cy="15" r="15"></circle> + <circle id="Oval-2" cx="45" cy="30" r="15"></circle> + <circle id="Oval-2" cx="15" cy="30" r="15"></circle> + <circle id="Oval-2" cx="30" cy="45" r="15"></circle> + </g> + <path d="M30.1661423,53.1120697 C30.7731053,52.7448273 31.496569,52.27205 32.2708674,51.7266851 C34.4295341,50.206262 36.5920643,48.4076875 38.5528907,46.3970103 C41.0453605,43.8411736 43.0359771,41.1201579 44.3649913,38.2760805 C45.9143768,34.9604111 46.5189868,31.5739534 46.0400329,28.1247989 C44.8783436,19.7589704 38.2035816,13.8 29.9536692,13.8 C21.729426,13.8 15.1515797,19.7271273 13.979175,28.1256561 C13.4436877,31.9616226 14.117704,35.6172984 15.8329966,39.1052994 C17.2810673,42.0499119 19.4291926,44.7925272 22.1016803,47.3165712 C23.9384961,49.0513607 25.9033304,50.5739312 27.9082535,51.9074996 C28.5857746,52.3581507 29.2003647,52.7428504 29.8255489,53.1166749 C29.8677966,53.1419367 29.9277254,53.1775635 29.992571,53.2160349 C30.0478933,53.1832531 30.1059008,53.1485187 30.1661423,53.1120697 Z M47.2286281,27.9597491 C49.4151899,43.706129 29.9554546,54.7338882 29.9554546,54.598772 C29.9554546,54.4636557 10.4785335,44.522963 12.7906991,27.9597491 C14.0362548,19.0372028 21.0632496,12.6 29.9536692,12.6 C38.8440888,12.6 45.9903824,19.0426044 47.2286281,27.9597491 Z" fill="#4A90E2" fill-rule="nonzero"></path> + </g> + </g> + <g id="Atom/Icon/Checkmark" transform="translate(23.000000, 24.000000)" fill="#4A90E2"> + <polygon id="Checkmark" points="1.5 8.5 0 10 4 14 15.5911865 2.40170288 14.0640869 0.975952148 4 11"></polygon> + </g> + </g> + </g> + </g> + </g> + </g> +</svg> \ No newline at end of file diff --git a/src/lib/components/Icons/PasswordLens.js b/src/lib/components/Icons/PasswordLens.js new file mode 100644 index 0000000..d950fbf --- /dev/null +++ b/src/lib/components/Icons/PasswordLens.js @@ -0,0 +1,24 @@ +import React from 'react' + +const SvgPasswordLens = props => ( + <svg viewBox="0 0 30 36" {...props}> + <g fill="none" fillRule="evenodd"> + <g transform="translate(-10 -10)"> + <circle cx={25} cy={12.5} r={12.5} /> + <circle cx={37.5} cy={25} r={12.5} /> + <circle cx={12.5} cy={25} r={12.5} /> + <circle cx={25} cy={37.5} r={12.5} /> + </g> + <path + d="M15.138 34.26c.506-.306 1.11-.7 1.754-1.154a37.638 37.638 0 0 0 5.235-4.442c2.077-2.13 3.736-4.397 4.844-6.767 1.291-2.763 1.795-5.585 1.396-8.46C27.399 6.466 21.837 1.5 14.96 1.5 8.108 1.5 2.626 6.44 1.65 13.438c-.446 3.197.116 6.243 1.545 9.15 1.207 2.454 2.997 4.74 5.224 6.842a36.386 36.386 0 0 0 4.839 3.826 38.483 38.483 0 0 0 1.737 1.09l.144-.086zm14.22-20.96c1.821 13.122-14.395 22.312-14.395 22.199 0-.113-16.23-8.397-14.304-22.2C1.697 5.865 7.553.5 14.96.5c7.41 0 13.364 5.369 14.396 12.8z" + fill="#4A90E2" + fillRule="nonzero" + /> + <g transform="translate(5 5)" fill="#4A90E2" stroke="#FFF"> + <circle cx={10.5} cy={10.5} r={10} /> + </g> + </g> + </svg> +) + +export default SvgPasswordLens diff --git a/src/lib/components/Icons/SelectedLens.js b/src/lib/components/Icons/SelectedLens.js new file mode 100644 index 0000000..37f657f --- /dev/null +++ b/src/lib/components/Icons/SelectedLens.js @@ -0,0 +1,27 @@ +import React from 'react' + +const SvgSelectedLens = props => ( + <svg viewBox="0 0 35 42" {...props}> + <defs> + <path id="selectedLens_svg__a" d="M0 0h60v60H0z" /> + </defs> + <g transform="translate(-13 -13)" fill="none" fillRule="evenodd"> + <mask id="selectedLens_svg__b" fill="#fff"> + <use xlinkHref="#selectedLens_svg__a" /> + </mask> + <g mask="url(#selectedLens_svg__b)"> + <circle cx={30} cy={15} r={15} /> + <circle cx={45} cy={30} r={15} /> + <circle cx={15} cy={30} r={15} /> + <circle cx={30} cy={45} r={15} /> + <path + d="M30.566 53.512c.607-.367 1.33-.84 2.105-1.385a45.165 45.165 0 0 0 6.282-5.33c2.492-2.556 4.483-5.277 5.812-8.12 1.55-3.317 2.154-6.703 1.675-10.152C45.278 20.159 38.604 14.2 30.354 14.2c-8.225 0-14.802 5.927-15.975 14.326-.535 3.836.139 7.491 1.854 10.98 1.448 2.944 3.596 5.687 6.269 8.21a43.663 43.663 0 0 0 5.806 4.591 46.18 46.18 0 0 0 2.085 1.309l.173-.104zM47.63 28.36c2.186 15.746-17.274 26.774-17.274 26.639 0-.135-19.476-10.076-17.164-26.64C14.436 19.438 21.463 13 30.354 13c8.89 0 16.036 6.443 17.275 15.36z" + fill="#1CB569" + fillRule="nonzero" + /> + </g> + </g> + </svg> +) + +export default SvgSelectedLens diff --git a/src/lib/components/Icons/UnselectedLens.js b/src/lib/components/Icons/UnselectedLens.js new file mode 100644 index 0000000..d3fc1c0 --- /dev/null +++ b/src/lib/components/Icons/UnselectedLens.js @@ -0,0 +1,24 @@ +import React from 'react' + +const SvgUnselectedLens = props => ( + <svg viewBox="0 0 36 43" {...props}> + <g fill="none" fillRule="evenodd"> + <g transform="translate(-12 -12)"> + <circle cx={30} cy={15} r={15} /> + <circle cx={45} cy={30} r={15} /> + <circle cx={15} cy={30} r={15} /> + <circle cx={30} cy={45} r={15} /> + </g> + <path + d="M18.166 41.112c.607-.367 1.33-.84 2.105-1.385a45.165 45.165 0 0 0 6.282-5.33c2.492-2.556 4.483-5.277 5.812-8.12 1.55-3.317 2.154-6.703 1.675-10.152C32.878 7.759 26.204 1.8 17.954 1.8 9.729 1.8 3.152 7.727 1.979 16.126c-.535 3.836.139 7.491 1.854 10.98 1.448 2.944 3.596 5.687 6.269 8.21a43.663 43.663 0 0 0 5.806 4.591 46.18 46.18 0 0 0 2.085 1.309l.173-.104zM35.23 15.96c2.186 15.746-17.274 26.774-17.274 26.639 0-.135-19.476-10.076-17.164-26.64C2.036 7.038 9.063.6 17.954.6c8.89 0 16.036 6.443 17.275 15.36z" + fill="#4A90E2" + fillRule="nonzero" + /> + <g fill="#4A90E2"> + <path d="M12.5 20.5L11 22l4 4 11.591-11.598-1.527-1.426L15 23z" /> + </g> + </g> + </svg> +) + +export default SvgUnselectedLens diff --git a/src/lib/components/Icons/index.js b/src/lib/components/Icons/index.js index 2db5687..d0ea6f0 100644 --- a/src/lib/components/Icons/index.js +++ b/src/lib/components/Icons/index.js @@ -40,6 +40,9 @@ import Checkmark from './Checkmark.js' import CleanBrain from './CleanBrain.js' import ToggleArrow from './ToggleArrow.js' import AsteriksCircle from './AsteriksCircle.js' +import SelectedLens from './SelectedLens.js' +import UnselectedLens from './UnselectedLens.js' +import PasswordLens from './PasswordLens.js' export { Agent, @@ -84,4 +87,7 @@ export { CleanBrain, AsteriksCircle, ToggleArrow, + SelectedLens, + UnselectedLens, + PasswordLens, } diff --git a/src/lib/index.js b/src/lib/index.js index 0dba3dd..bb61b55 100644 --- a/src/lib/index.js +++ b/src/lib/index.js @@ -64,6 +64,9 @@ export { AsteriksCircle, CleanBrain, ToggleArrow, + SelectedLens, + UnselectedLens, + PasswordLens, } from './components/Icons' export { default as colors } from './assets/colors' -- GitLab