Updating icons

[Christonn93]

Work that have been done

1. Installed material icons material-icons
2. Changed all old icons whit the new
3. Changed class name in _components.scss
4. Added logo as favicon

List of icons

Material Icons - The list of icons to be used.

UPDATE

As suggested from @pretzL.

Its created a Icon.svelte file under components/ui.

Usage

<Icon iconName="the name of the icon" /> Eks: <Icon iconName="bookmark" />

## Usage For adding new icons use the following: <span class="material-icons">THE NAME OF THE ICON GOES HERE</span>

eks: <span class="material-icons">settings</span> will display:

To get the style correct, you will need to include import 'material-icons/iconfont/material-icons.css'; in the script tag on the page_name.svelte where the icons will be used.

Style

In the _components.scss file there is a @mixin icon section that was used to add style to icons before the change. I removed .icon-f and .icon-o and replaced the class name with .material-icons but did not see any change in the style. Not sure why this is.

I also added the logo as a favicon.ico, For some reason it do not show up. Might work more on that.

[Christonn93]

This PR goes a little bit outside of the scope of the task. There are no issues with favicon and if there are these should be reported and worked on in a separate issue

Okey. Thanks for the heads up. Will keep this in mind. I have reverted the changes made when adding the favicon, removed the favicon from the file structure also.

[pretzL]

To get the style correct, you will need to include import 'material-icons/iconfont/material-icons.css'; in the script tag on the page_name.svelte where the icons will be used.

Why require that developers jump through so many hoops to add an icon to a page when we can create an <Icon /> component instead? It can take in a name attribute which corresponds to the material-icon name, apply any default styling we wish and sets up all necessary imports.

[Christonn93]

Sure. I can set this up. I'll make a update later on this later.

[Christonn93]

UPDATE

As suggested from @pretzL.

Its created a Icon.svelte file under components/ui.

Usage

<Icon iconName="the name of the icon" /> Eks: <Icon iconName="bookmark" />

[Christonn93]

I'll review this once the formatting is in-line with the rest of the project. As-is it's impossible to see what you've actually changed.

Terminal output from prettier.

Would appreciate some guidance on how to resolve the formatting issue, since I do not find any issue with the formatting when its using the formatting settings that is provided in the .prettierrc file and formatting the code based on that.

It looks like for me that all the current code do not follow the settings from .prettierrc. Every file that I format show the same output in the terminal, and the code is altered based on this. Can it be that code have been pushed without farmatting?

[pretzL]

Can it be that code have been pushed without farmatting?

Definitely

[Christonn93]

This is what my output in vcs is displaying:

output-vsc-prettier.txt

[Fermain]

Prettier isn't running on component files at all

(base) oliver@Fermain -mollify % npm run format --workspace @mollify/lms  

> @mollify/lms@0.2.11 format
> prettier --plugin-search-dir . --write .

.eslintrc.cjs 29ms
.markdownlint.yaml 15ms
.prettierrc 7ms
package.json 3ms
playwright.config.ts 84ms
postcss.config.cjs 4ms
README.md 23ms
src/app.d.ts 3ms
src/app.html 31ms
src/app.postcss 21ms
src/index.test.ts 4ms
src/lib/stores/audio.ts 4ms
src/lib/stores/bookmarks.ts 2ms
src/lib/stores/files.ts 3ms
src/lib/styles/_components.scss 4ms
src/lib/styles/_iframe.scss 3ms
src/lib/styles/_markdown.scss 4ms
src/lib/styles/_permalink.scss 1ms
src/lib/styles/_toc.scss 2ms
src/lib/styles/styles.scss 2ms
src/lib/utils/bookmarking/AddRemove.ts 18ms
src/lib/utils/fuseSearch/flattenData.ts 7ms
src/lib/utils/fuseSearch/fuseSetup.ts 22ms
src/lib/utils/fuseSearch/generateRawSearchQuery.ts 13ms
src/lib/utils/fuseSearch/getSearchResults.ts 5ms
src/lib/utils/fuseSearch/parseRawSearchQuery.ts 7ms
src/lib/utils/fuseSearch/removeStopWords.ts 2ms
src/lib/utils/fuseSearch/stopWords.ts 6ms
src/lib/utils/fuseSearch/updateQueryString.ts 2ms
src/lib/utils/getCurrentPageEntityMeta.ts 4ms
src/lib/utils/getEntityChildren.ts 3ms
src/lib/utils/getEntityFrontmatter.ts 4ms
src/lib/utils/getEntityMeta.ts 3ms
src/lib/utils/getEntityMetaTree.ts 6ms
src/lib/utils/getEntitySlug.ts 2ms
src/lib/utils/sortChildrenByDependency.ts 5ms
src/lib/utils/storage/index.ts 1ms
src/lib/utils/storage/load.ts 2ms
src/lib/utils/storage/remove.ts 1ms
src/lib/utils/storage/save.ts 1ms
src/lib/utils/storage/update.ts 2ms
src/lib/utils/tts/createAudio.ts 2ms
src/lib/utils/tts/fetchAudio.ts 2ms
src/routes/+layout.server.ts 2ms
src/routes/+page.md 6ms
src/routes/api/getCurrentPage/+server.ts 3ms
src/routes/api/getEntityMetaTree/+server.ts 2ms
src/routes/api/molly/+server.ts 1ms
src/routes/api/search/+server.ts 2ms
src/routes/api/tags/+server.ts 6ms
src/routes/api/tts/createAudio/+server.ts 3ms
src/routes/api/tts/getAudio/+server.ts 2ms
src/routes/content/feu1/+page.md 3ms
src/routes/content/feu1/agency-1/+page.md 11ms
src/routes/content/feu1/agency-1/delivery/+page.md 2ms
src/routes/content/feu1/agency-1/discovery/+page.md 30ms
src/routes/content/feu1/agency-1/planning/+page.md 3ms
src/routes/content/feu1/agency-1/retrospective/+page.md 4ms
src/routes/content/feu1/agency-1/sprint/+page.md 2ms
src/routes/content/feu1/design/+page.md 11ms
src/routes/content/feu1/design/ca/+page.md 14ms
src/routes/content/feu1/design/ca/marking-criteria/+page.md 3ms
src/routes/content/feu1/design/module-1/+page.md 4ms
src/routes/content/feu1/design/module-1/content-management/+page.md 103ms
src/routes/content/feu1/design/module-1/fundamentals-layout/+page.md 52ms
src/routes/content/feu1/design/module-1/intro-branding/+page.md 46ms
src/routes/content/feu1/design/module-1/visual-hierarchy/+page.md 59ms
src/routes/content/feu1/design/module-2/+page.md 5ms
src/routes/content/feu1/design/module-2/colors-of-the-web/+page.md 36ms
src/routes/content/feu1/design/module-2/font-pairings/+page.md 41ms
src/routes/content/feu1/design/module-2/fundamentals-color/+page.md 64ms
src/routes/content/feu1/design/module-2/typography-basics/+page.md 75ms
src/routes/content/feu1/design/module-3/+page.md 2ms
src/routes/content/feu1/design/module-3/intro-ux/+page.md 26ms
src/routes/content/feu1/design/module-3/principles-ui-design/+page.md 29ms
src/routes/content/feu1/design/module-3/principles-ux-design/+page.md 30ms
src/routes/content/feu1/design/module-3/user-interface/+page.md 31ms
src/routes/content/feu1/design/module-4/+page.md 2ms
src/routes/content/feu1/design/module-4/creating-prototypes/+page.md 30ms
src/routes/content/feu1/design/module-4/creating-wireframes/+page.md 31ms
src/routes/content/feu1/design/module-4/intro-prototyping/+page.md 27ms
src/routes/content/feu1/design/module-4/intro-wireframes/+page.md 22ms
src/routes/content/feu1/html-css/+page.md 6ms
src/routes/content/feu1/html-css/ca/+page.md 10ms
src/routes/content/feu1/html-css/ca/marking-criteria/+page.md 1ms
src/routes/content/feu1/html-css/module-1/+page.md 7ms
src/routes/content/feu1/html-css/module-1/file-management/+page.md 25ms
src/routes/content/feu1/html-css/module-1/fonts/+page.md 27ms
src/routes/content/feu1/html-css/module-1/intro-css/+page.md 64ms
src/routes/content/feu1/html-css/module-1/intro-html/+page.md 46ms
src/routes/content/feu1/html-css/module-1/module-1-checkpoint/+page.md 11ms
src/routes/content/feu1/html-css/module-2/+page.md 4ms
src/routes/content/feu1/html-css/module-2/css-box-model/+page.md 20ms
src/routes/content/feu1/html-css/module-2/forms/+page.md 36ms
src/routes/content/feu1/html-css/module-2/images-icons/+page.md 29ms
src/routes/content/feu1/html-css/module-2/module-2-checkpoint/+page.md 8ms
src/routes/content/feu1/html-css/module-2/navigation/+page.md 14ms
src/routes/content/feu1/html-css/module-3/+page.md 5ms
src/routes/content/feu1/html-css/module-3/css-grids/+page.md 18ms
src/routes/content/feu1/html-css/module-3/flexbox/+page.md 29ms
src/routes/content/feu1/html-css/module-3/media-queries/+page.md 24ms
src/routes/content/feu1/html-css/module-3/module-3-checkpoint/+page.md 9ms
src/routes/content/feu1/html-css/module-3/positioning/+page.md 38ms
src/routes/content/feu1/html-css/module-4/+page.md 5ms
src/routes/content/feu1/html-css/module-4/animations-transitions/+page.md 18ms
src/routes/content/feu1/html-css/module-4/bug-fixing/+page.md 25ms
src/routes/content/feu1/html-css/module-4/common-layouts/+page.md 8ms
src/routes/content/feu1/html-css/module-4/css-variables/+page.md 15ms
src/routes/content/feu1/html-css/module-4/module-4-checkpoint/+page.md 6ms
src/routes/content/feu1/introduction/+page.md 9ms
src/routes/content/feu1/introduction/ca/+page.md 4ms
src/routes/content/feu1/introduction/module-1/+page.md 13ms
src/routes/content/feu1/introduction/module-1/file-delivery-lanekassen/+page.md 21ms
src/routes/content/feu1/introduction/module-1/moodle-reflective-journal/+page.md 25ms
src/routes/content/feu1/introduction/module-1/plagiarism-referencing/+page.md 19ms
src/routes/content/feu1/introduction/module-1/planning-communication/+page.md 29ms
src/routes/content/feu1/introduction/module-1/what-to-expect/+page.md 3ms
src/routes/content/feu1/javascript-1/+page.md 6ms
src/routes/content/feu1/javascript-1/ca/+page.md 11ms
src/routes/content/feu1/javascript-1/ca/marking-criteria/+page.md 2ms
src/routes/content/feu1/javascript-1/module-1/+page.md 3ms
src/routes/content/feu1/javascript-1/module-1/html-from-objects/+page.md 15ms
src/routes/content/feu1/javascript-1/module-1/html-in-functions/+page.md 13ms
src/routes/content/feu1/javascript-1/module-1/intro-concepts/+page.md 18ms
src/routes/content/feu1/javascript-1/module-1/manipulating-dom/+page.md 17ms
src/routes/content/feu1/javascript-1/module-2/+page.md 2ms
src/routes/content/feu1/javascript-1/module-2/callback-functions/+page.md 11ms
src/routes/content/feu1/javascript-1/module-2/dom-events/+page.md 9ms
src/routes/content/feu1/javascript-1/module-2/length-trim-eventlistener/+page.md 5ms
src/routes/content/feu1/javascript-1/module-2/more-dom-concepts/+page.md 7ms
src/routes/content/feu1/javascript-1/module-3/+page.md 3ms
src/routes/content/feu1/javascript-1/module-3/arrow-functions-promises/+page.md 19ms
src/routes/content/feu1/javascript-1/module-3/handling-errors/+page.md 7ms
src/routes/content/feu1/javascript-1/module-3/more-about-apis/+page.md 25ms
src/routes/content/feu1/javascript-1/module-3/query-string-parameters/+page.md 6ms
src/routes/content/feu1/javascript-1/module-4/+page.md 5ms
src/routes/content/feu1/javascript-1/module-4/form-validation/+page.md 10ms
src/routes/content/feu1/javascript-1/module-4/get-requests/+page.md 10ms
src/routes/content/feu1/javascript-1/module-4/single-api-results/+page.md 8ms
src/routes/content/feu1/javascript-1/module-4/skipping-certain-api-results/+page.md 6ms
src/routes/content/feu1/porfolio-1/+page.md 2ms
src/routes/content/feu1/project-exam-1/+page.md 2ms
src/routes/content/feu1/project-methodology/+page.md 5ms
src/routes/content/feu1/project-methodology/ca/+page.md 8ms
src/routes/content/feu1/project-methodology/ca/marking-criteria/+page.md 1ms
src/routes/content/feu1/project-methodology/module-1/+page.md 3ms
src/routes/content/feu1/project-methodology/module-1/agile-scrum/+page.md 28ms
src/routes/content/feu1/project-methodology/module-1/gantt/+page.md 29ms
src/routes/content/feu1/project-methodology/module-1/kanban-user-stories/+page.md 25ms
src/routes/content/feu1/project-methodology/module-1/sdlc/+page.md 24ms
src/routes/content/feu1/project-methodology/module-1/trello/+page.md 10ms
src/routes/content/feu1/semester-project-1/+page.md 12ms
src/routes/content/feu1/semester-project-1/marking-criteria/+page.md 5ms
src/routes/test/+page.md 7ms
svelte.config.js 4ms
tailwind.config.cjs 2ms
tsconfig.json 1ms
vite.config.ts 3ms

[Christonn93]

Is there something I) need to install after the change in the package.json?

Trying to run formatting but getting this error @Fermain

[Fermain]

@Christonn93 I did it on my side and pushed, but I am super confused about whats going on with formatting at the moment.

[Fermain]

@pretzL @Christonn93 I fixed the formatting by resolving the conflicts. A couple of icon changes fell out during this process, like Entity.svelte.

[Christonn93]

I will have a look at it after dinner, @Fermain

[Christonn93]

Still reciving this error:

But icons in Reader.svelte and Entity.svelte is changed.

[Fermain]

Still reciving this error:

But icons in Reader.svelte and Entity.svelte is changed.

I assume that you have tried npm i from the top level of the repo?

[Christonn93]

I'll do the changes today and push it, Thanks for the feedback.

[pretzL]

I'll do the changes today and push it, Thanks for the feedback.

Just in case you don't know, go to the "files" tab and click Add suggestion to batch on each of the suggestions you want to commit, then commit. Saves you a lot of time