Inject SVG sprite via ajax (#10320)

* AJAX SVG
* Fix PWA
* Remove unused PWA assets

Signed-off-by: jolheiser <[email protected]>

Co-Authored-by: silverwind <[email protected]>

Author: jolheiser

modules/templates/helper.go

@@ -287,7 +287,7 @@ func NewFuncMap() []template.FuncMap {
 			return false
 		},
 		"svg": func(icon string, size int) template.HTML {
-			return template.HTML(fmt.Sprintf(`<svg class="svg %s" width="%d" height="%d" aria-hidden="true"><use xlink:href="%s/img/svg/icons.svg#%s" /></svg>`, icon, size, size, setting.StaticURLPrefix, icon))
+			return template.HTML(fmt.Sprintf(`<svg class="svg %s" width="%d" height="%d" aria-hidden="true"><use xlink:href="#%s" /></svg>`, icon, size, size, icon))
 		},
 	}}
 }

templates/pwa/serviceworker_js.tmpl

@@ -22,7 +22,6 @@ var urlsToCache = [
   '{{StaticUrlPrefix}}/css/swagger.css?v={{MD5 AppVer}}',
   '{{StaticUrlPrefix}}/fomantic/semantic.min.css?v={{MD5 AppVer}}',
   '{{StaticUrlPrefix}}/vendor/assets/font-awesome/css/font-awesome.min.css',
-  '{{StaticUrlPrefix}}/vendor/assets/octicons/octicons.min.css',
   '{{StaticUrlPrefix}}/vendor/plugins/dropzone/dropzone.css',
   '{{StaticUrlPrefix}}/vendor/plugins/jquery.datetimepicker/jquery.datetimepicker.css',
   '{{StaticUrlPrefix}}/vendor/plugins/jquery.minicolors/jquery.minicolors.css',
@@ -41,11 +40,10 @@ var urlsToCache = [
   '{{StaticUrlPrefix}}/img/gitea-lg.png',
 
   // svg
-  '{{StaticUrlPrefix}}/img/svg/icons.svg'
+  '{{StaticUrlPrefix}}/img/svg/icons.svg',
 
   // fonts
   '{{StaticUrlPrefix}}/fomantic/themes/default/assets/fonts/icons.woff2',
-  '{{StaticUrlPrefix}}/vendor/assets/octicons/octicons.woff2?ef21c39f0ca9b1b5116e5eb7ac5eabe6',
   '{{StaticUrlPrefix}}/vendor/assets/roboto-fonts/roboto-v20-latin-ext_cyrillic-ext_latin_greek_vietnamese_cyrillic_greek-ext-regular.woff2',
   '{{StaticUrlPrefix}}/vendor/assets/roboto-fonts/roboto-v20-latin-ext_cyrillic-ext_latin_greek_vietnamese_cyrillic_greek-ext-italic.woff2',
   '{{StaticUrlPrefix}}/vendor/assets/roboto-fonts/roboto-v20-latin-ext_cyrillic-ext_latin_greek_vietnamese_cyrillic_greek-ext-700.woff2',

web_src/js/index.js

@@ -3581,3 +3581,12 @@ window.onOAuthLoginClick = function () {
     oauthNav.show();
   }, 5000);
 };
+
+// Pull SVGs via AJAX to workaround CORS issues with <use> tags
+// https://css-tricks.com/ajaxing-svg-sprite/
+$.get(`${window.config.StaticUrlPrefix}/img/svg/icons.svg`, (data) => {
+  const div = document.createElement('div');
+  div.style.display = 'none';
+  div.innerHTML = new XMLSerializer().serializeToString(data.documentElement);
+  document.body.insertBefore(div, document.body.childNodes[0]);
+});