Use svg icons

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

1 files changed, 20 insertions, 9 deletions

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
 	}