[PR #1091] [MERGED] Introduce component wrapper for svg icons #3059

New issue

Closed

opened 2026-03-17 00:42:29 +03:00 by kerem · 0 comments

kerem commented

2026-03-17 00:42:29 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/hoppscotch/hoppscotch/pull/1091
Author: @liyasthomas
Created: 8/17/2020
Status: ✅ Merged
Merged: 8/17/2020
Merged by: @liyasthomas

Base: master ← Head: svgicons

📝 Commits (2)

3924370 Introduce component wrapper for svg icons
2306845 Remove stale file

📊 Changes

38 files changed (+247 additions, -52 deletions)

View changed files

📝 components/collections/add-collection.vue (+5 -1)
📝 components/collections/add-folder.vue (+5 -1)
📝 components/collections/collection.vue (+5 -2)
📝 components/collections/edit-collection.vue (+5 -1)
📝 components/collections/edit-folder.vue (+5 -1)
📝 components/collections/edit-request.vue (+5 -1)
📝 components/collections/folder.vue (+3 -1)
📝 components/collections/import-export-collections.vue (+5 -1)
📝 components/collections/request.vue (+5 -3)
📝 components/collections/save-request-as.vue (+5 -1)
📝 components/environments/add-environment.vue (+5 -1)
📝 components/environments/edit-environment.vue (+8 -2)
📝 components/environments/environment.vue (+4 -2)
📝 components/environments/import-export-environment.vue (+5 -1)
📝 components/firebase/feeds.vue (+3 -1)
📝 components/firebase/inputform.vue (+3 -1)
📝 components/firebase/logout.vue (+3 -1)
📝 components/layout/history.vue (+8 -2)
📝 components/layout/pw-header.vue (+7 -3)
📝 components/layout/sidenav.vue (+16 -12)

...and 18 more files

📄 Description

Introduce component wrapper for svg icons using https://github.com/nuxt-community/svg-module
Use component wrapper for all icons. (few of them are completed, remaining will be done in future).
Resolves #1025

Steps

Download icon's svg from https://material.io/tools/icons/?style=baseline (keep default file names, ex: send-24px.svg).
Change corresponding material icon font instance from:

<i class="material-icons">send</i>

to:

<sendIcon class="material-icons" />

Import icon component from svg, ex:

impoer sendIcon from "~/static/icons/send-24px.svg?inline"

Don't forget the ?inline at end of file name.

Add icon component to components.

export default {
	components {
		sendIcon
	}
}

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/hoppscotch/hoppscotch/pull/1091 **Author:** [@liyasthomas](https://github.com/liyasthomas) **Created:** 8/17/2020 **Status:** ✅ Merged **Merged:** 8/17/2020 **Merged by:** [@liyasthomas](https://github.com/liyasthomas) **Base:** `master` ← **Head:** `svgicons` --- ### 📝 Commits (2) - [`3924370`](https://github.com/hoppscotch/hoppscotch/commit/3924370b3ec95baa0ba804ce78f896a54959f6fe) Introduce component wrapper for svg icons - [`2306845`](https://github.com/hoppscotch/hoppscotch/commit/23068450ed17d5835a230b1e26b6be006daab0f5) Remove stale file ### 📊 Changes **38 files changed** (+247 additions, -52 deletions) <details> <summary>View changed files</summary> 📝 `components/collections/add-collection.vue` (+5 -1) 📝 `components/collections/add-folder.vue` (+5 -1) 📝 `components/collections/collection.vue` (+5 -2) 📝 `components/collections/edit-collection.vue` (+5 -1) 📝 `components/collections/edit-folder.vue` (+5 -1) 📝 `components/collections/edit-request.vue` (+5 -1) 📝 `components/collections/folder.vue` (+3 -1) 📝 `components/collections/import-export-collections.vue` (+5 -1) 📝 `components/collections/request.vue` (+5 -3) 📝 `components/collections/save-request-as.vue` (+5 -1) 📝 `components/environments/add-environment.vue` (+5 -1) 📝 `components/environments/edit-environment.vue` (+8 -2) 📝 `components/environments/environment.vue` (+4 -2) 📝 `components/environments/import-export-environment.vue` (+5 -1) 📝 `components/firebase/feeds.vue` (+3 -1) 📝 `components/firebase/inputform.vue` (+3 -1) 📝 `components/firebase/logout.vue` (+3 -1) 📝 `components/layout/history.vue` (+8 -2) 📝 `components/layout/pw-header.vue` (+7 -3) 📝 `components/layout/sidenav.vue` (+16 -12) _...and 18 more files_ </details> ### 📄 Description - [x] Introduce component wrapper for svg icons using https://github.com/nuxt-community/svg-module - [ ] Use component wrapper for all icons. (few of them are completed, remaining will be done in future). - [x] Resolves #1025 ### **Steps** 1. Download icon's svg from https://material.io/tools/icons/?style=baseline (keep default file names, ex: `send-24px.svg`). 2. Change corresponding material icon font instance from: ``` <i class="material-icons">send</i> ``` to: ``` <sendIcon class="material-icons" /> ``` 3. Import icon component from svg, ex: ``` impoer sendIcon from "~/static/icons/send-24px.svg?inline" ``` **Don't forget the `?inline` at end of file name.** 4. Add icon component to `components`. ``` export default { components { sendIcon } } ``` --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>