Use svg icons

Signed-off-by: Louis Chemineau <louis@chmn.me>

6 files changed, 51 insertions, 29 deletions

diff --git a/apps/comments/src/comments-tab.js b/apps/comments/src/comments-tab.js
index 7b12de6de4f..ef17ce984a4 100644
--- a/apps/comments/src/comments-tab.js
+++ b/apps/comments/src/comments-tab.js
@@ -20,14 +20,14 @@
  *
  */
 
-import MessageReplyText from 'vue-material-design-icons/MessageReplyText.vue'
+import MessageReplyText from '@mdi/svg/svg/message-reply-text.svg?raw'
 
 // Init Comments tab component
 let TabInstance = null
 const commentTab = new OCA.Files.Sidebar.Tab({
 	id: 'comments',
 	name: t('comments', 'Comments'),
-	icon: 'icon-comment',
+	iconSvg: MessageReplyText,
 
 	async mount(el, fileInfo, context) {
 		if (TabInstance) {
@@ -53,7 +53,7 @@ const commentTab = new OCA.Files.Sidebar.Tab({
 	},
 })
 
-window.addEventListener('DOMContentLoaded', function() {
+window.addEventListener('DOMContentLoaded', function () {
 	if (OCA.Files && OCA.Files.Sidebar) {
 		OCA.Files.Sidebar.registerTab(commentTab)
 	}
diff --git a/apps/files/src/models/Tab.js b/apps/files/src/models/Tab.js
index 9fd38f71bd7..cbf35c77dcb 100644
--- a/apps/files/src/models/Tab.js
+++ b/apps/files/src/models/Tab.js
@@ -19,12 +19,14 @@
  * along with this program. If not, see <http://www.gnu.org/licenses/>.
  *
  */
+import { sanitizeSVG } from '@skjnldsv/sanitize-svg'
 
 export default class Tab {
 
 	_id
 	_name
 	_icon
+	_iconSvgSanitized
 	_mount
 	_update
 	_destroy
@@ -37,19 +39,20 @@ export default class Tab {
 	 * @param {object} options destructuring object
 	 * @param {string} options.id the unique id of this tab
 	 * @param {string} options.name the translated tab name
-	 * @param {string} options.icon the vue component
+	 * @param {?string} options.icon the icon css class
+	 * @param {?string} options.iconSvg the icon in svg format
 	 * @param {Function} options.mount function to mount the tab
 	 * @param {Function} options.update function to update the tab
 	 * @param {Function} options.destroy function to destroy the tab
 	 * @param {Function} [options.enabled] define conditions whether this tab is active. Must returns a boolean
 	 * @param {Function} [options.scrollBottomReached] executed when the tab is scrolled to the bottom
 	 */
-	constructor({ id, name, icon, mount, update, destroy, enabled, scrollBottomReached } = {}) {
+	constructor({ id, name, icon, iconSvg, mount, update, destroy, enabled, scrollBottomReached } = {}) {
 		if (enabled === undefined) {
 			enabled = () => true
 		}
 		if (scrollBottomReached === undefined) {
-			scrollBottomReached = () => {}
+			scrollBottomReached = () => { }
 		}
 
 		// Sanity checks
@@ -59,8 +62,8 @@ export default class Tab {
 		if (typeof name !== 'string' || name.trim() === '') {
 			throw new Error('The name argument is not a valid string')
 		}
-		if ((typeof icon !== 'string' || icon.trim() === '') && typeof icon !== 'object') {
-			throw new Error('The icon argument is not a valid string or vuejs component')
+		if ((typeof icon !== 'string' || icon.trim() === '') && typeof iconSvg !== 'string') {
+			throw new Error('Missing valid string for icon or iconSvg argument')
 		}
 		if (typeof mount !== 'function') {
 			throw new Error('The mount argument should be a function')
@@ -81,12 +84,20 @@ export default class Tab {
 		this._id = id
 		this._name = name
 		this._icon = icon
+		this._iconSvg = iconSvg
 		this._mount = mount
 		this._update = update
 		this._destroy = destroy
 		this._enabled = enabled
 		this._scrollBottomReached = scrollBottomReached
 
+		if (typeof iconSvg === 'string') {
+			sanitizeSVG(iconSvg)
+				.then(sanitizedSvg => {
+					this._iconSvgSanitized = sanitizedSvg
+				})
+		}
+
 	}
 
 	get id() {
@@ -97,14 +108,14 @@ export default class Tab {
 		return this._name
 	}
 
-	get isIconClass() {
-		return typeof this._icon === 'string'
-	}
-
 	get icon() {
 		return this._icon
 	}
 
+	get iconSvg() {
+		return this._iconSvgSanitized
+	}
+
 	get mount() {
 		return this._mount
 	}
diff --git a/apps/files/src/views/Sidebar.vue b/apps/files/src/views/Sidebar.vue
index 7c5ac8f0fdb..6c7d391b3c1 100644
--- a/apps/files/src/views/Sidebar.vue
+++ b/apps/files/src/views/Sidebar.vue
@@ -67,14 +67,15 @@
 				:id="tab.id"
 				:key="tab.id"
 				:name="tab.name"
-				:icon="tab.isIconClass ? tab.icon : undefined"
+				:icon="tab.icon"
 				:on-mount="tab.mount"
 				:on-update="tab.update"
 				:on-destroy="tab.destroy"
 				:on-scroll-bottom-reached="tab.scrollBottomReached"
 				:file-info="fileInfo">
-				<template #icon v-if="!tab.isIconClass">
-					<component :is="tab.icon" />
+				<template v-if="tab.iconSvg !== undefined" #icon>
+					<!-- eslint-disable-next-line vue/no-v-html -->
+					<span class="svg-icon" v-html="tab.iconSvg" />
 				</template>
 			</SidebarTab>
 		</template>
@@ -512,5 +513,13 @@ export default {
 		top: 0 !important;
 		height: 100% !important;
 	}
+
+	.svg-icon {
+		::v-deep svg {
+			width: 20px;
+			height: 20px;
+			fill: var(--color-main-text);
+		}
+	}
 }
 </style>
diff --git a/apps/files_sharing/src/files_sharing_tab.js b/apps/files_sharing/src/files_sharing_tab.js
index 9694e2a9539..ed515e86e01 100644
--- a/apps/files_sharing/src/files_sharing_tab.js
+++ b/apps/files_sharing/src/files_sharing_tab.js
@@ -31,7 +31,7 @@ import ExternalLinkActions from './services/ExternalLinkActions.js'
 import ExternalShareActions from './services/ExternalShareActions.js'
 import TabSections from './services/TabSections.js'
 
-import ShareVariant from 'vue-material-design-icons/ShareVariant.vue'
+import ShareVariant from '@mdi/svg/svg/share-variant.svg?raw'
 
 // Init Sharing Tab Service
 if (!window.OCA.Sharing) {
@@ -50,12 +50,12 @@ Vue.use(VueClipboard)
 const View = Vue.extend(SharingTab)
 let TabInstance = null
 
-window.addEventListener('DOMContentLoaded', function() {
+window.addEventListener('DOMContentLoaded', function () {
 	if (OCA.Files && OCA.Files.Sidebar) {
 		OCA.Files.Sidebar.registerTab(new OCA.Files.Sidebar.Tab({
 			id: 'sharing',
 			name: t('files_sharing', 'Sharing'),
-			icon: ShareVariant,
+			iconSvg: ShareVariant,
 
 			async mount(el, fileInfo, context) {
 				if (TabInstance) {
diff --git a/apps/files_versions/src/files_versions_tab.js b/apps/files_versions/src/files_versions_tab.js
index d293a68510c..b4ab075b7a8 100644
--- a/apps/files_versions/src/files_versions_tab.js
+++ b/apps/files_versions/src/files_versions_tab.js
@@ -22,7 +22,7 @@ import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 
 import VersionTab from './views/VersionTab.vue'
 import VTooltip from 'v-tooltip'
-import BackupRestore from 'vue-material-design-icons/BackupRestore.vue'
+import BackupRestore from '@mdi/svg/svg/backup-restore.svg?raw'
 
 Vue.prototype.t = t
 Vue.prototype.n = n
@@ -33,12 +33,12 @@ Vue.use(VTooltip)
 const View = Vue.extend(VersionTab)
 let TabInstance = null
 
-window.addEventListener('DOMContentLoaded', function() {
+window.addEventListener('DOMContentLoaded', function () {
 	if (OCA.Files && OCA.Files.Sidebar) {
 		OCA.Files.Sidebar.registerTab(new OCA.Files.Sidebar.Tab({
 			id: 'version_vue',
 			name: t('files_versions', 'Version'),
-			icon: BackupRestore,
+			iconSvg: BackupRestore,
 
 			async mount(el, fileInfo, context) {
 				if (TabInstance) {
diff --git a/apps/files_versions/src/views/VersionTab.vue b/apps/files_versions/src/views/VersionTab.vue
index 119dc95a60d..90664491941 100644
--- a/apps/files_versions/src/views/VersionTab.vue
+++ b/apps/files_versions/src/views/VersionTab.vue
@@ -19,8 +19,8 @@
 	<div>
 		<ul>
 			<NcListItem v-for="version in versions"
+				:key="version.dateTime.unix()"
 				class="version"
-				key="version.url"
 				:title="version.title"
 				:href="version.url">
 				<template #icon>
@@ -47,7 +47,7 @@
 						</template>
 						{{ t('files_versions', 'Download version') }}
 					</NcActionLink>
-					<NcActionButton @click="restoreVersion(version)" v-if="!version.isCurrent">
+					<NcActionButton v-if="!version.isCurrent" @click="restoreVersion(version)">
 						<template #icon>
 							<BackupRestore :size="22" />
 						</template>
@@ -73,7 +73,6 @@ import { generateRemoteUrl, generateUrl } from '@nextcloud/router'
 import { getCurrentUser } from '@nextcloud/auth'
 import BackupRestore from 'vue-material-design-icons/BackupRestore.vue'
 import Download from 'vue-material-design-icons/Download.vue'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink.js'
 import NcListItem from '@nextcloud/vue/dist/Components/NcListItem.js'
@@ -108,6 +107,9 @@ function getDavRequest() {
 
 /**
  * Format version
+ *
+ * @param version
+ * @param fileInfo
  */
 function formatVersion(version, fileInfo) {
 	const fileVersion = basename(version.filename)
@@ -117,7 +119,8 @@ function formatVersion(version, fileInfo) {
 		? generateUrl('/core/preview?fileId={fileId}&c={fileEtag}&x=250&y=250&forceIcon=0&a=0', {
 			fileId: fileInfo.id,
 			fileEtag: fileInfo.etag,
-		}) : generateUrl('/apps/files_versions/preview?file={file}&version={fileVersion}', {
+		})
+		: generateUrl('/apps/files_versions/preview?file={file}&version={fileVersion}', {
 			file: joinPaths(fileInfo.path, fileInfo.name),
 			fileVersion,
 		})
@@ -151,7 +154,6 @@ const client = createClient(remote)
 export default {
 	name: 'VersionTab',
 	components: {
-		NcButton,
 		NcEmptyContent,
 		NcActionLink,
 		NcActionButton,
@@ -192,7 +194,7 @@ export default {
 				this.versions = response.map(version => formatVersion(version, this.fileInfo))
 				this.loading = false
 			} catch (exception) {
-				logger.error('Could not fetch version', {exception})
+				logger.error('Could not fetch version', { exception })
 				this.loading = false
 			}
 		},
@@ -205,14 +207,14 @@ export default {
 		async restoreVersion(version) {
 			try {
 				logger.debug('restoring version', version.url)
-				const response = await client.moveFile(
+				await client.moveFile(
 					`/versions/${getCurrentUser().uid}/versions/${this.fileInfo.id}/${version.fileVersion}`,
 					`/versions/${getCurrentUser().uid}/restore/target`
 				)
 				showSuccess(t('files_versions', 'Version restored'))
 				await this.fetchVersions()
 			} catch (exception) {
-				logger.error('Could not restore version', {exception})
+				logger.error('Could not restore version', { exception })
 				showError(t('files_versions', 'Could not restore version'))
 			}
 		},