Investigation:core/icons

[advweb-grp1]

Look into font awesome icon library. Does that require additions to be made for the icon folder? or is this just another package? This will have implications for the eslint. If it is just a download package to upload then alter the eslint config to exclude the icon directory.

[AymanReh]

font-awesome-free library contains 5 packages(fontawesome-svg-core, free-brands-svg-icons, free-regular-svg-icons, free-solid-svg-icons and vue-fontawesome). Because of this the eslint config will need to be updated to exclude these packages.

[AymanReh]

Also, bootstrap icons is also packaged up into a singular package so the eslint config will need to be updated for that too

[AymanReh]

ignore comment that was just deleted. I understand where i went wrong

[AymanReh]

I do not believe any changes will have to be done to the icons folder since font awesome icon and bootstrap icons are both packages which can be imported.

[rwx-yxu]

Comments are not detailed enough for everyone to understand. What is it are you suggesting to add? Bootstrap icons or font awesome? Tell us how to install them. Definitively say if there will be any changes to the icons folder if we install them.

[rwx-yxu]

During meeting, clarified that the integration is through npm install which will modify the package.json. This means that no additional files will be added to the icons directory and using eslint to ignore that icon folder specifically will have no impact on our choice of icons to use.

[rwx-yxu]

Boot strap and font awesome are not the same. Boot strap icons are free and open source where as font awesome has a free and paid version. We may need to credit font awesome due to this.

Lets go with bootstrap icons.

Example install of bootstrap icons.

1. install package: npm install bootstrap-icons
2. add this line to main.js import 'bootstrap-icons/font/bootstrap-icons.css' Example code to extract an icon to add in our component.

   
   <template>
   <div>
   <h1>Bootstrap Icons Example</h1>
   <bootstrap-icon :icon="sevenCircleFillIcon" />
   </div>
   </template>

Key thing to point out is that around knowing what to extract from `bootstrap-icons/icons` if you go to the icon docs: https://icons.getbootstrap.com/icons/7-circle-fill/
It doesn't say import using `biSevenCircleFill`. The convention seems to be that all are basically the defined classes except without the dashes and camel case. Numbers are changed to words.
`bi-7-circle-fill` -> `biSevenCircleFill` If in doubt, Google 🙌

[rwx-yxu]

Dev spec should be to add the boostrap icon dependency.

[advweb-grp1]

Done