README.md in ustyle-1.16.2 vs README.md in ustyle-1.19.2

- old
+ new

@@ -109,10 +109,22 @@ <svg role="img" class="us-icon--medium us-icon--custom us-icon--{$NAME}"> <use xlink:href="/images/icons.svg#icon-{$NAME}"></use> </svg> ``` +#### Adding a new Icon + +To add a new Icon, add the SVG file to `/vendor/assets/images/icons`, +then add your new icon name as `@state icon` to [this +file](https://github.com/uswitch/ustyle/blob/new-shield-icon/vendor/assets/stylesheets/ustyle/icons/_base.scss#L19-L112). + +Finally, build the optimised icons using + +```sh +grunt icons +``` + ## Usage ### Rails / Sprockets apps If using Rails and Sass, just import the base uSwitch styles at the start of your file @@ -159,10 +171,16 @@ For Sass documentation on mixins/variables available to you, please see: https://ustyle.guide/sass/ ## Development -To preview changes that you make to uStyle's components and documentation, run: +To preview changes that you make to uStyle's components and documentation, install dependencies with + + $ npm install + + $ bundle install + +then run: $ npm start This will run the [Grunt](http://gruntjs.com/) default task that builds uStyle, then starts a [Browsersync](https://www.browsersync.io/) server at http://localhost:3000. Changes that you make are live-reloaded in your browser.