@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.

npm install -g @vue/cli

You may also need to run the following

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

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
• Packaging Vue Components for npm

This repo was scaffolded using vue-sfc-rollup