npm package: @growsuper/icons
Description: A Vue-based SVG Icon system. All icons come from our Design System.
Author: GROW Development
Latest version: 1.5.4

# @growsuper/icons

A Vue-based SVG Icon system. All icons come from our Design System.

## Development

You should install the Vue CLI if you haven't already.

```shell
npm install -g @vue/cli
```

You may also need to run the following
```shell
npm i -g @vue/cli-service-global
```

Now you can run `npm start` which will serve `Library.vue`, a page that imports all of the icons and displays them. This page can be built by running `npm run build:docs`, and in the future it will be automatically deployed on every update.

### Adding a new icon
1. Get the new icon from the design team, check that any `fill` attributes in the recieved SVG file are filled with the colour default value of `#28324f`.
2. Execute the following command to create a new icon template (initially named as `iconTEMPLATE.vue`) into `./src/components/icons`.
```
npm run new
```
3. Update the `iconName` in the iconMixin.
4. Rename the `IconTEMPLATE.vue` to the name of the icon it needs to be. Please follow existing naming convention.
5. Replace everything between `<gs-base-icon>` tags with `<path />` element found in the SVG icon you've been given by the design team. Remember to clean out all `fill` attributes from the `<path />` so that color can be correctly applied via the `<BaseIcon />` component and CSS.
6. Import/export the component from ../index.js. The name you supply here will be prepended with `gs-` and will be the component that you use where you install this icon library. If there's more than one word, use kebab case. Eg 'add-circle' will become a `<gs-add-circle />`.
7. Add the Icon you've exported in ../docs/Library.vue.
8. Update the `version` in `package.json`.

### Testing your new icon
Now that you've added your icon, you must test the icon before releasing it on NPM by installing this version in your application.

However, before the icon set can be installed, you must run `npm run build`. This will use Rollup.js to minify and package the icon library in various formats. The `package.json`'s `main`, `module` and `unpkg` properties have already been configured so that where ever the icon set is imported, one of these packaged formats can be used.

Now in the application that depends on this icon set, you can run the following command to install from local
```shell
npm install {relative path to this icons repository}
```

## Releasing
**IMPORTANT: ENSURE THAT YOU HAVE RUN `npm build` TO GENERATE THE `/dist` FOLDERS and updated the version number in `package.json`.**

1. Make sure you've completed the above step before continuing.
2. Ensure that you've set your token in `.npmrc`. If you don't have this token or don't know what this is, ask a fellow dev.
3. You can now run `npm publish` to release a new version.

If you need to check that the package has been published correctly, check with a more senior dev as the NPM login is not given out willy nilly.

## Technical approach

For more details about the technical approach taken to the package and it's components, see the following entries from the official Vue.js cookbook. They served as inspiration and a great starting point to adapt.

- [Editable SVG Icon Systems](https://vuejs.org/v2/cookbook/editable-svg-icons.html)
- [Packaging Vue Components for npm](https://vuejs.org/v2/cookbook/packaging-sfc-for-npm.html)

This repo was scaffolded using [vue-sfc-rollup](https://github.com/team-innovation/vue-sfc-rollup)