Improve <SvgIcon> to make it output svg node and optimize performance

templates/projects/view.tmpl

@@ -224,7 +224,7 @@
 							{{- range index $.LinkedPRs .ID}}
 							<div class="meta gt-my-2">
 								<a href="{{$.RepoLink}}/pulls/{{.Index}}">
-									<span class="gt-m-0 {{if .PullRequest.HasMerged}}purple{{else if .IsClosed}}red{{else}}green{{end}}">{{svg "octicon-git-merge" 16 "gt-mr-2 gt-vm"}}</span>
+									<span class="gt-m-0 text {{if .PullRequest.HasMerged}}purple{{else if .IsClosed}}red{{else}}green{{end}}">{{svg "octicon-git-merge" 16 "gt-mr-2 gt-vm"}}</span>
 									<span class="gt-vm">{{.Title}} <span class="text light grey">#{{.Index}}</span></span>
 								</a>
 							</div>

templates/repo/projects/view.tmpl

@@ -235,7 +235,7 @@
 							{{- range index $.LinkedPRs .ID}}
 							<div class="meta gt-my-2">
 								<a href="{{$.RepoLink}}/pulls/{{.Index}}">
-									<span class="gt-m-0 {{if .PullRequest.HasMerged}}purple{{else if .IsClosed}}red{{else}}green{{end}}">{{svg "octicon-git-merge" 16 "gt-mr-2 gt-vm"}}</span>
+									<span class="gt-m-0 text {{if .PullRequest.HasMerged}}purple{{else if .IsClosed}}red{{else}}green{{end}}">{{svg "octicon-git-merge" 16 "gt-mr-2 gt-vm"}}</span>
 									<span class="gt-vm">{{.Title}} <span class="text light grey">#{{.Index}}</span></span>
 								</a>
 							</div>

templates/user/settings/keys_gpg.tmpl

@@ -54,7 +54,7 @@
 					{{end}}
 				</div>
 				<div class="left floated content">
-					<span class="{{if or .ExpiredUnix.IsZero ($.PageStartTime.Before .ExpiredUnix.AsTime)}}green{{end}}">{{svg "octicon-key" 32}}</span>
+					<span class="text {{if or .ExpiredUnix.IsZero ($.PageStartTime.Before .ExpiredUnix.AsTime)}}green{{end}}">{{svg "octicon-key" 32}}</span>
 				</div>
 				<div class="content">
 					{{if .Verified}}

templates/user/settings/keys_ssh.tmpl

@@ -47,7 +47,7 @@
 
 				</div>
 				<div class="left floated content">
-					<span class="tooltip{{if .HasRecentActivity}} green{{end}}" {{if .HasRecentActivity}}data-content="{{$.locale.Tr "settings.key_state_desc"}}"{{end}}>{{svg "octicon-key" 32}}</span>
+					<span class="tooltip text {{if .HasRecentActivity}}green{{end}}" {{if .HasRecentActivity}}data-content="{{$.locale.Tr "settings.key_state_desc"}}"{{end}}>{{svg "octicon-key" 32}}</span>
 				</div>
 				<div class="content">
 						{{if .Verified}}

web_src/css/base.css

@@ -2420,18 +2420,6 @@ a.ui.basic.label:hover {
   height: 2.1666em !important;
 }
 
-span.green .svg {
-  color: var(--color-green);
-}
-
-span.red .svg {
-  color: var(--color-red);
-}
-
-span.purple .svg {
-  color: var(--color-purple);
-}
-
 .migrate .svg.gitea-git {
   color: var(--color-git);
 }

web_src/js/components/ActionRunStatus.vue

@@ -1,10 +1,10 @@
 <template>
-  <SvgIcon name="octicon-check-circle-fill" class="green" :size="size" :class-name="className" v-if="status === 'success'"/>
+  <SvgIcon name="octicon-check-circle-fill" class="ui text green" :size="size" :class-name="className" v-if="status === 'success'"/>
   <SvgIcon name="octicon-skip" class="ui text grey" :size="size" :class-name="className" v-else-if="status === 'skipped'"/>
   <SvgIcon name="octicon-clock" class="ui text yellow" :size="size" :class-name="className" v-else-if="status === 'waiting'"/>
   <SvgIcon name="octicon-blocked" class="ui text yellow" :size="size" :class-name="className" v-else-if="status === 'blocked'"/>
   <SvgIcon name="octicon-meter" class="ui text yellow" :size="size" :class-name="'job-status-rotate ' + className" v-else-if="status === 'running'"/>
-  <SvgIcon name="octicon-x-circle-fill" class="red" :size="size" v-else/>
+  <SvgIcon name="octicon-x-circle-fill" class="ui text red" :size="size" v-else/>
 </template>
 
 <script>

web_src/js/components/ContextPopup.vue

@@ -3,7 +3,7 @@
     <div v-if="loading" class="ui active centered inline loader"/>
     <div v-if="!loading && issue !== null">
       <p><small>{{ issue.repository.full_name }} on {{ createdAt }}</small></p>
-      <p><svg-icon :name="icon" :class="[color]" /> <strong>{{ issue.title }}</strong> #{{ issue.number }}</p>
+      <p><svg-icon :name="icon" :class="['text', color]" /> <strong>{{ issue.title }}</strong> #{{ issue.number }}</p>
       <p>{{ body }}</p>
       <div>
         <div

web_src/js/svg.js

@@ -107,7 +107,6 @@ export function svg(name, size = 16, className = '') {
   const svgNode = document.firstChild;
   if (size !== 16) svgNode.setAttribute('width', String(size));
   if (size !== 16) svgNode.setAttribute('height', String(size));
-  // filter array to remove empty string
   if (className) svgNode.classList.add(...className.split(/\s+/).filter(Boolean));
   return serializer.serializeToString(svgNode);
 }
@@ -120,6 +119,45 @@ export const SvgIcon = {
     className: {type: String, default: ''},
   },
   render() {
-    return h('span', {innerHTML: svg(this.name, this.size, this.className)});
+    const svgStr = svgs[this.name];
+    if (!svgStr) throw new Error(`Unknown SVG icon: ${this.name}`);
+
+    // parse the SVG string to 2 parts
+    // * svgInnerHtml: the inner part of the SVG, will be used as the content of the <svg> VNode
+    // * svgOuter: the outer part of the SVG, including attributes
+    // the builtin SVG contents are clean, so it's safe to use `indexOf` to split the content:
+    // eg: <svg outer-attributes>${svgInnerHtml}</svg>
+    const p1 = svgStr.indexOf('>'), p2 = svgStr.lastIndexOf('<');
+    if (p1 === -1 || p2 === -1) throw new Error(`Invalid SVG icon: ${this.name}`);
+    const svgInnerHtml = svgStr.slice(p1 + 1, p2);
+    const svgOuterHtml = svgStr.slice(0, p1 + 1) + svgStr.slice(p2);
+    const svgDoc = parser.parseFromString(svgOuterHtml, 'image/svg+xml');
+    const svgOuter = svgDoc.firstChild;
+
+    // https://vuejs.org/guide/extras/render-function.html#creating-vnodes
+    // the `^` is used for attr, set SVG attributes like 'width', `aria-hidden`, `viewBox`, etc
+    const attrs = {};
+    for (const attr of svgOuter.attributes) {
+      if (attr.name === 'class') continue;
+      attrs[`^${attr.name}`] = attr.value;
+    }
+    attrs[`^width`] = this.size;
+    attrs[`^height`] = this.size;
+
+    // make the <SvgIcon class="foo" class-name="bar"> classes work together
+    const classes = [];
+    for (const cls of svgOuter.classList) {
+      classes.push(cls);
+    }
+    if (this.className) {
+      classes.push(...this.className.split(/\s+/).filter(Boolean));
+    }
+
+    // create VNode
+    return h('svg', {
+      ...attrs,
+      class: classes,
+      innerHTML: svgInnerHtml,
+    });
   },
 };