mirror of
https://github.com/kingomarnajjar/flex-template-web.git
synced 2026-07-28 12:43:11 +10:00
Add keys icon components
This commit is contained in:
Kimmo Puputti
parent
813738e6cd
commit
c7db98a668
3 changed files with 118 additions and 0 deletions
57
src/components/KeysIcon/KeysIcon.js
Normal file
57
src/components/KeysIcon/KeysIcon.js
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
import React, { PropTypes } from 'react';
|
||||
|
||||
const KeysIcon = props => {
|
||||
const { className } = props;
|
||||
return (
|
||||
<svg
|
||||
className={className}
|
||||
width="50px"
|
||||
height="57px"
|
||||
viewBox="0 0 50 57"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<g
|
||||
stroke="none"
|
||||
strokeWidth="1"
|
||||
fill="none"
|
||||
fillRule="evenodd"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<g transform="translate(-538.000000, -240.000000)" stroke="#C0392B">
|
||||
<g transform="translate(540.000000, 242.000000)">
|
||||
<g>
|
||||
<path
|
||||
d="M25,19.65 C25,12.6626 19.4022727,7 12.5,7 C5.59772727,7 0,12.6626 0,19.65 C0,25.4391 3.84772727,30.3082 9.09090909,31.8101 L9.09090909,34.6 L6.81818182,36.8977 L9.09090909,39.2 L9.09090909,41.5 L6.81818182,43.8 L9.09090909,46.1 L9.09090909,49.55 L12.5,53 L15.9090909,49.55 L15.9090909,31.8101 C21.1522727,30.3082 25,25.4391 25,19.65 L25,19.65 Z"
|
||||
strokeWidth="2.5"
|
||||
/>
|
||||
<path
|
||||
d="M16,15.5 C16,17.432 14.432,19 12.5,19 C10.568,19 9,17.432 9,15.5 C9,13.568 10.568,12 12.5,12 C14.432,12 16,13.568 16,15.5 L16,15.5 Z"
|
||||
strokeWidth="2"
|
||||
/>
|
||||
<path
|
||||
d="M16,33.460821 C19.8584615,35.6660894 24.6353846,35.6843714 28.5192308,33.5362343 L31,35.7163649 L31,39.1442433 L34.4615385,39.1442433 L35.6153846,40.3440007 L35.6153846,43.7147478 L38.6546154,43.7147478 L41.1053846,46 L46,46 L46,41.15298 L33.4138462,28.6892143 C36.1138462,23.9061813 35.4192308,17.7474266 31.3138462,13.6819628 C28.42,10.8162565 24.4784615,9.62335484 20.71,10.1032578"
|
||||
strokeWidth="2.5"
|
||||
/>
|
||||
<path
|
||||
d="M13,15 L13,4.61538462 C13,2.06769231 15.016,0 17.5,0 C19.984,0 22,2.06769231 22,4.61538462 L22,9.81230769"
|
||||
strokeWidth="2.5"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
KeysIcon.defaultProps = { className: null };
|
||||
|
||||
const { string } = PropTypes;
|
||||
|
||||
KeysIcon.propTypes = {
|
||||
className: string,
|
||||
};
|
||||
|
||||
export default KeysIcon;
|
||||
57
src/components/KeysIconSuccess/KeysIconSuccess.js
Normal file
57
src/components/KeysIconSuccess/KeysIconSuccess.js
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
import React, { PropTypes } from 'react';
|
||||
|
||||
const KeysIconSuccess = props => {
|
||||
const { className } = props;
|
||||
return (
|
||||
<svg className={className} width="52" height="60" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="translate(2 2)" fill="none" fillRule="evenodd">
|
||||
<path
|
||||
d="M25 19.6C25 12.6 19.4 7 12.5 7 5.5 7 0 12.7 0 19.6c0 5.8 3.8 10.7 9 12.2v2.8L7 37 9 39v2.3L7 43.8 9 46v3.5l3.5 3.5 3.4-3.5V31.8c5.2-1.5 9-6.4 9-12.2z"
|
||||
stroke="#C0392B"
|
||||
strokeWidth="2.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M16 15.5c0 2-1.6 3.5-3.5 3.5-2 0-3.5-1.6-3.5-3.5 0-2 1.6-3.5 3.5-3.5 2 0 3.5 1.6 3.5 3.5z"
|
||||
stroke="#C0392B"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M16 33.5c4 2.2 8.6 2.2 12.5 0l2.5 2.2V39h3.5l1 1.3v3.4h3.2L41 46h5v-4.8L33.4 28.7c2.7-4.8 2-11-2-15-3-3-7-4-10.7-3.6"
|
||||
stroke="#C0392B"
|
||||
strokeWidth="2.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<path
|
||||
d="M13 15V4.6C13 2 15 0 17.5 0S22 2 22 4.6v5.2"
|
||||
stroke="#C0392B"
|
||||
strokeWidth="2.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
<circle stroke="#FFF" strokeWidth="2" fill="#2ECC71" cx="35.5" cy="43.5" r="13.5" />
|
||||
<path
|
||||
stroke="#FFF"
|
||||
strokeWidth="2.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M42 41l-8 8-4-4"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
KeysIconSuccess.defaultProps = { className: null };
|
||||
|
||||
const { string } = PropTypes;
|
||||
|
||||
KeysIconSuccess.propTypes = {
|
||||
className: string,
|
||||
};
|
||||
|
||||
export default KeysIconSuccess;
|
||||
|
|
@ -19,6 +19,8 @@ import FilterPanel from './FilterPanel/FilterPanel';
|
|||
import HeroSection from './HeroSection/HeroSection';
|
||||
import ImageCarousel from './ImageCarousel/ImageCarousel';
|
||||
import ImageFromFile from './ImageFromFile/ImageFromFile';
|
||||
import KeysIcon from './KeysIcon/KeysIcon';
|
||||
import KeysIconSuccess from './KeysIconSuccess/KeysIconSuccess';
|
||||
import ListingCard from './ListingCard/ListingCard';
|
||||
import LocationAutocompleteInput, {
|
||||
LocationAutocompleteInputField,
|
||||
|
|
@ -88,6 +90,8 @@ export {
|
|||
ImageCarousel,
|
||||
ImageFromFile,
|
||||
InlineTextButton,
|
||||
KeysIcon,
|
||||
KeysIconSuccess,
|
||||
ListingCard,
|
||||
LocationAutocompleteInput,
|
||||
LocationAutocompleteInputField,
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue