Render svg icons directly

components/application.templ

@@ -2,33 +2,13 @@ package components
 
 import (
 	"gitlab.unjx.de/flohoss/godash/services"
-	"html/template"
 )
 
-var ImageTemplate = template.Must(template.New("bar").Parse("<div class=\"{{ .Background }}img rounded w-8 h-8 bg-contain bg-center bg-origin-content bg-no-repeat opacity-90\" style=\"background-image: url({{ .Icon }})\"></div>"))
-
-type Image struct {
-	Background string
-	Icon       string
-}
-
-func backgroundColor(config string) string {
-	result := "p-[0.05rem] "
-	switch config {
-	case "dark":
-		return result + "bg-black "
-	case "light":
-		return result + "bg-white "
-	case "base":
-		return result + "bg-base-300 "
-	default:
-		return ""
-	}
-}
-
 templ Application(application services.Application) {
 	<a href={ templ.URL(application.URL) } class="flex items-center hover-effect">
-		@templ.FromGoHTML(ImageTemplate, Image{Background: backgroundColor(application.Background), Icon: application.Icon})
+		<div class="w-8 h-8 dark:text-white fill-current">
+			@templ.Raw(application.Icon)
+		</div>
 		<div class="uppercase truncate ml-2">{ application.Name }</div>
 	</a>
 }

handlers/routes.go

@@ -12,8 +12,5 @@ func SetupRoutes(router *http.ServeMux, sse *sse.Server, appHandler *AppHandler)
 	fsAssets := http.FileServer(http.Dir("assets"))
 	router.Handle("GET /assets/", http.StripPrefix("/assets/", fsAssets))
 
-	fsIcons := http.FileServer(http.Dir("storage/icons"))
-	router.Handle("GET /storage/icons/", http.StripPrefix("/storage/icons/", fsIcons))
-
 	router.HandleFunc("GET /", appHandler.appHandler)
 }

services/bookmark.services.go

@@ -4,14 +4,16 @@ import (
 	"io"
 	"log/slog"
 	"os"
+	"path/filepath"
 	"strings"
 
 	"gopkg.in/yaml.v3"
 )
 
-const storageDir = "storage/"
+const simpleIconsFolder = "node_modules/simple-icons/icons/"
-const iconsDir = storageDir + "icons/"
+const storageFolder = "storage/"
-const bookmarkFile = storageDir + "bookmarks.yaml"
+const iconsFolder = storageFolder + "icons/"
+const bookmarkFile = storageFolder + "bookmarks.yaml"
 const defaultConfig = `links:
   - category: "Code"
     entries:
@@ -22,11 +24,11 @@ applications:
   - category: "Code"
     entries:
       - name: "Github"
-        icon: "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
+        icon: "si/github.svg"
         url: "https://github.com"`
 
 func init() {
-	folders := []string{storageDir, iconsDir}
+	folders := []string{storageFolder, iconsFolder}
 	for _, path := range folders {
 		err := os.MkdirAll(path, 0755)
 		if err != nil {
@@ -78,9 +80,21 @@ func (bs *BookmarkService) readBookmarksFile() []byte {
 func (bs *BookmarkService) replaceIconString() {
 	for _, v := range bs.bookmarks.Applications {
 		for i, bookmark := range v.Entries {
-			if !strings.Contains(bookmark.Icon, "http") {
+			rawHTML := ""
-				v.Entries[i].Icon = "/" + iconsDir + bookmark.Icon
+			var data []byte
+			var err error
+			if filepath.Ext(bookmark.Icon) == ".svg" {
+				if strings.HasPrefix(bookmark.Icon, "si/") {
+					data, err = os.ReadFile(simpleIconsFolder + strings.Replace(bookmark.Icon, "si/", "", 1))
+				} else {
+					data, err = os.ReadFile(iconsFolder + bookmark.Icon)
+				}
+				if err != nil {
+					continue
+				}
+				rawHTML = string(data)
 			}
+			v.Entries[i].Icon = rawHTML
 		}
 	}
 }