tilt-images v7.2.0
tilt-icons
This is a collection of icons and images used throughout the tilt websites.
Adding an SVG icon
Remove all attributes except for viewBox and add a className to the
<svg>tag.const classes = classnames('tilt-icon tilt-icon-SOME_VALUE', this.props.className);Remove
<desc/>tags and comments.- Set
<title/>tag text to be the name of the component (this is used in the"renders without error"tests). - Add a
tilt-icon-mainclass if necessary - Remove all ids and unused attributes. Style attributes will live in the CSS file.
OPTIONAL Consolidate
transformsinto a single group Exporting files from Sketch often creates additional<g>elements with a translate transform. Often times the transforms can be added together into a single transform in a singlegelement and the emptygs can be removed.<g transform="translate(-10.00000, 20.00000)"> <g transform="translate(20.00000, 40.0000)"> ...... </g> </g>Becomes
<g transform="translate(10, 60.00000)"> ...... </g>Create css file in app/stylesheets
- Add the icon to app/index.js
Note: If you are having any stylesheet issues it might be as a result of having the new NPM version. NPM 3+ is not supported yet please revert to NPM 2 to use this repository.
9 years ago