esnextbin example.
-
-
Save zanzamar/228423d11c7bcc82bdf2f2fc34e5a660 to your computer and use it in GitHub Desktop.
<!doctype html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>ESNext Bin Sketch</title> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css"> | |
<style> | |
body { | |
color: black; | |
background-color: white; | |
} | |
#app { | |
padding: 20px; | |
} | |
</style> | |
</head> | |
<body> | |
<div id="app"></div> | |
</body> | |
</html> |
import React from 'react' | |
import ReactDOM from 'react-dom' | |
function CheckMark({ height, width, ...props }) { | |
const mainColor = props.mainColor || '#1ABC9C'; | |
const secondColor = props.secondColor || '#FAFAFB'; | |
return ( | |
<svg | |
height={height} | |
width={width} | |
viewBox="0 0 150 150" | |
xmlnsXlink="http://www.w3.org/1999/xlink" | |
{...props} | |
> | |
<defs> | |
<circle id="path-1" cx="75" cy="75" r="75"></circle> | |
</defs> | |
<g stroke="none" strokeWidth="1" fill="none" fillRule="evenodd"> | |
<g transform="translate(-112, -258)"> | |
<g transform="translate(112.5, 258.5)"> | |
<mask id="mask-2" fill="white"> | |
<use xlinkHref="#path-1"></use> | |
</mask> | |
<use id="Mask" fill={mainColor} xlinkHref="#path-1"></use> | |
<g mask="url(#mask-2)"> | |
<g transform="translate(38.25, 45.75)"> | |
<g> | |
<polygon fill="#16A085" points="18.776911 56.7447103 115.917016 153.884816 153.058691 116.743141 56.070919 19.7553691" /> | |
<polygon fill="#16A085" points="70.843347 1.78571429 174.124562 105.06693 146.390543 132.800949 43.6071429 30.0175493" /> | |
<path d="M71.040911,2.21008278 C68.4487125,-0.42717045 64.2487637,-0.42717045 61.6566837,2.21008278 L22.1890057,42.3654587 L11.6945805,33.1935616 C9.13790457,30.592209 4.99313412,30.592209 2.43420844,33.1935616 C-0.122467474,35.7947937 -0.122467474,40.0139651 2.43420844,42.6151972 L18.1129122,56.3168427 C20.6695881,58.9181953 24.8143585,58.9181953 27.3732842,56.3168427 C27.6298754,56.0559003 27.8444316,55.7655627 28.0501071,55.4753456 C28.0876426,55.4393244 28.1296776,55.4145072 28.1673315,55.3784861 L71.0410294,11.7554432 C73.6307413,9.12047894 73.6307413,4.84504704 71.040911,2.21008278 L71.040911,2.21008278 Z" fill={secondColor} /> | |
</g> | |
</g> | |
</g> | |
</g> | |
</g> | |
</g> | |
</svg> | |
); | |
} | |
CheckMark.propTypes = { | |
mainColor: React.PropTypes.string, | |
secondColor: React.PropTypes.string, | |
height: React.PropTypes.oneOfType([ | |
React.PropTypes.number, | |
React.PropTypes.string, | |
]).isRequired, | |
width: React.PropTypes.oneOfType([ | |
React.PropTypes.number, | |
React.PropTypes.string, | |
]).isRequired, | |
}; | |
ReactDOM.render( | |
<CheckMark color="black" width={500} height={500} />, | |
document.getElementById('app'), | |
); |
{ | |
"name": "esnextbin-sketch", | |
"version": "0.0.0", | |
"dependencies": { | |
"babel-runtime": "6.25.0", | |
"react": "15.4.2", | |
"react-dom": "15.4.2" | |
} | |
} |
This repo primarially utilizes SVGS for its images.
SVGs are generated from Sketch and should be "cleaned up". There are automated ways to generate and clean up from sketch. Below we have some manual steps:
- Open sketch file
- Select "element" you want to export as svg
- right click -> copy SVG code
- Paste SVG code into new named file in
/src/modules/clients/assets/svgs/[FILE_NAME].jsx
- Clean up File (see clean up step)
- Add file into local repo for inclusion. see
/src/client/purchase-checkout/app/assets/svgs/index.jsx
for example.
Then you can use the SVG like any other component.
Throughout we are using icons. When we have an icon we want to make sure that it has a consistent "stage" (art board) that it is placed on. Allowing us to always know where/how it is being used with consistency. This really helps with consistent use of styles and a singluar "Component" that wraps alll of our svgs.
In SVG Terms that should be our "view box": viewBox="0 0 151 151"
<svg
viewBox="0 0 150 150"
xmlnsXlink="http://www.w3.org/1999/xlink"
The viewbox should always be 150 x 150. With SVGs we are able to infinitely scale from there.
Any SVG which has xlinkHref
needs to have an xmlns:xlink reference
https://medium.com/@pnowelldesign/stuff-at-the-top-of-an-svg-f3ad198eb54e
- xmlnsXlink="http://www.w3.org/1999/xlink" (xmlns:xlink="http://www.w3.org/1999/xlink")
must have a viewBox defined and pass in height/width with props.
We have the ability to clean up SVGs in an automated way.. We may implement that later (ie: take all paths down to thousandth's decimal place)
[TODO] Optimizer Investigation: https://github.com/BohemianCoding/svgo-compressor Runs them through https://github.com/boopathi/react-svg-loader
For now, we do some simple things
(see Briefcase.jsx for an example)
- Add the following to the top of the file: /* eslint-disable max-len, react/self-closing-comp */
- Wrap in react tags
- Add a width/height as props
- Provide color as props where necessary
- find and replace .000000 with .0 (any significant 0000 should be easy to find/replace)
- remove un-necessary id attributes (sketh adds a lot of them)
- transform to "react" attributes (stroke-width => strokeWidth, fill-rule => fillRule, etc.)
This might work for some of the tasks: https://github.com/overblog/clean-sketch
import React from 'react';
function Briefcase({ height, width, color, ...props }) { return ( <svg width={width || 45} height={height || 40} viewBox="0 0 46 40" {...props}> ); }
Briefcase.propTypes = { color: React.PropTypes.string, height: React.PropTypes.oneOfType([ React.PropTypes.number, React.PropTypes.string, ]).isRequired, width: React.PropTypes.oneOfType([ React.PropTypes.number, React.PropTypes.string, ]).isRequired, };
Briefcase.defaultProps = { color: '#000000', };
export default Briefcase;