Skip to content

Instantly share code, notes, and snippets.

@zanzamar

zanzamar/README.md

Last active July 28, 2017 21:34
Show Gist options
  • Save zanzamar/228423d11c7bcc82bdf2f2fc34e5a660 to your computer and use it in GitHub Desktop.
Save zanzamar/228423d11c7bcc82bdf2f2fc34e5a660 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!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>
Raw
index.js
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'),
);
Raw
package.json
{
"name": "esnextbin-sketch",
"version": "0.0.0",
"dependencies": {
"babel-runtime": "6.25.0",
"react": "15.4.2",
"react-dom": "15.4.2"
}
}
Raw
SVG_Creation.md

SVG Creation

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.

Icons

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.

Required data points

xLinkHref

Any SVG which has xlinkHref needs to have an xmlns:xlink reference https://medium.com/@pnowelldesign/stuff-at-the-top-of-an-svg-f3ad198eb54e

viewBox

must have a viewBox defined and pass in height/width with props.

Cleanup

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

Other notes: https://medium.com/sketch-app-sources/exploring-ways-to-export-clean-svg-icons-with-sketch-the-correct-way-752e73ec4694

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;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment