use IconHTML

Author: wxiaoguang

modules/svg/svg.go

@@ -62,5 +62,5 @@ func RenderHTML(icon string, others ...interface{}) template.HTML {
 		}
 		return template.HTML(svgStr)
 	}
-	return template.HTML("")
+	return ""
 }

public/img/svg/gitea-azure-ad.svg

@@ -5,6 +5,9 @@ package oauth2
 
 import (
 	"errors"
+	"fmt"
+	"html"
+	"html/template"
 	"net/url"
 	"sort"
 
@@ -19,7 +22,7 @@ import (
 type Provider interface {
 	Name() string
 	DisplayName() string
-	IconURL() string
+	IconHTML() template.HTML
 	CustomURLSettings() *CustomURLSettings
 }
 
@@ -35,7 +38,7 @@ type GothProvider interface {
 }
 
 // AuthSourceProvider provides a provider for an AuthSource. Multiple auth sources could use the same registered GothProvider
-// So each auth source should have its own DisplayName and IconURL for display.
+// So each auth source should have its own DisplayName and IconHTML for display.
 // The Name is the GothProvider's name, to help to find the GothProvider to sign in.
 // The DisplayName is the auth source config's name, site admin set it on the admin page, the IconURL can also be set there.
 type AuthSourceProvider struct {
@@ -51,11 +54,14 @@ func (p *AuthSourceProvider) DisplayName() string {
 	return p.sourceName
 }
 
-func (p *AuthSourceProvider) IconURL() string {
+func (p *AuthSourceProvider) IconHTML() template.HTML {
 	if p.iconURL != "" {
-		return p.iconURL
+		img := fmt.Sprintf(`<img class="gt-mr-3" width="20" height="20" src="%s" alt="{{%s}}">`,
+			html.EscapeString(p.iconURL), html.EscapeString(p.DisplayName()),
+		)
+		return template.HTML(img)
 	}
-	return p.GothProvider.IconURL()
+	return p.GothProvider.IconHTML()
 }
 
 // Providers contains the map of registered OAuth2 providers in Gitea (based on goth)

public/img/svg/gitea-azuread.svg

@@ -3,7 +3,12 @@
 
 package oauth2
 
-import "code.gitea.io/gitea/modules/setting"
+import (
+	"html/template"
+
+	"code.gitea.io/gitea/modules/log"
+	"code.gitea.io/gitea/modules/svg"
+)
 
 // BaseProvider represents a common base for Provider
 type BaseProvider struct {
@@ -21,14 +26,21 @@ func (b *BaseProvider) DisplayName() string {
 	return b.displayName
 }
 
-// IconURL returns an icon path for this provider
-// Use svg for default icons, providers_openid has its own IconURL function
-func (b *BaseProvider) IconURL() string {
-	name := b.name
-	if b.name == "gplus" {
-		name = "google"
+// IconHTML returns icon HTML for this provider
+func (b *BaseProvider) IconHTML() template.HTML {
+	svgName := "gitea-" + b.name
+	switch b.name {
+	case "gplus":
+		svgName = "gitea-google"
+	case "github":
+		svgName = "octicon-mark-github"
+	}
+	svgHTML := svg.RenderHTML(svgName, 20, "gt-mr-3")
+	if svgHTML == "" {
+		log.Error("No SVG icon for oauth2 provider %q", b.name)
+		svgHTML = svg.RenderHTML("gitea-openid", 20, "gt-mr-3")
 	}
-	return setting.AppSubURL + "/assets/img/auth/" + name + ".svg"
+	return svgHTML
 }
 
 // CustomURLSettings returns the custom url settings for this provider

public/img/svg/gitea-azureadv2.svg

@@ -4,8 +4,11 @@
 package oauth2
 
 import (
+	"html/template"
+
 	"code.gitea.io/gitea/modules/log"
 	"code.gitea.io/gitea/modules/setting"
+	"code.gitea.io/gitea/modules/svg"
 
 	"github.com/markbates/goth"
 	"github.com/markbates/goth/providers/openidConnect"
@@ -24,9 +27,9 @@ func (o *OpenIDProvider) DisplayName() string {
 	return "OpenID Connect"
 }
 
-// IconURL returns an icon path for this provider
-func (o *OpenIDProvider) IconURL() string {
-	return setting.AppSubURL + "/assets/img/svg/gitea-openid.svg"
+// IconHTML returns icon HTML for this provider
+func (o *OpenIDProvider) IconHTML() template.HTML {
+	return svg.RenderHTML("gitea-openid", 20, "gt-mr-3")
 }
 
 // CreateGothProvider creates a GothProvider from this Provider

services/auth/source/oauth2/providers.go

@@ -62,7 +62,7 @@
 				{{range $key := .OrderedOAuth2Names}}
 					{{$provider := index $.OAuth2Providers $key}}
 					<a class="{{$provider.Name}} ui button gt-df gt-ac gt-jc gt-py-3 oauth-login-link" href="{{AppSubUrl}}/user/oauth2/{{$key}}">
-						<img class="gt-mr-3" width="20" height="20" src="{{$provider.IconURL}}" alt="{{$provider.DisplayName}}">
+						{{$provider.IconHTML}}
 						{{$.locale.Tr "sign_in_with_provider" $provider.DisplayName}}
 					</a>
 				{{end}}

services/auth/source/oauth2/providers_base.go

@@ -8,7 +8,7 @@
 					{{range $key := .OrderedOAuth2Names}}
 						{{$provider := index $.OAuth2Providers $key}}
 						<a class="item" href="{{AppSubUrl}}/user/oauth2/{{$key}}">
-							<img class="gt-mr-3" width="20" height="20" src="{{$provider.IconURL}}" alt="{{$provider.DisplayName}}">
+							{{$provider.IconHTML}}
 							{{$provider.DisplayName}}
 						</a>
 					{{end}}