From c3516806462081b1e7cf94be807d23dca50ee2e3 Mon Sep 17 00:00:00 2001 From: Bryant Howell - ThoughtSpot <83678239+bryanthowell-ts@users.noreply.github.com> Date: Thu, 19 Dec 2024 13:26:31 -0600 Subject: [PATCH 1/3] Update customize-icons.adoc Added much more instruction on how to use existing SVG paths and have it actually show up --- modules/ROOT/pages/customize-icons.adoc | 39 +++++++++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/modules/ROOT/pages/customize-icons.adoc b/modules/ROOT/pages/customize-icons.adoc index 7f500ba09..55c2bbdf2 100644 --- a/modules/ROOT/pages/customize-icons.adoc +++ b/modules/ROOT/pages/customize-icons.adoc @@ -69,3 +69,42 @@ a|**After** + image::./images/post-icon-override.png[After icon override] |====== +== Creating an icon override +The basic structure of an icon override file is: + +[source,svg] +---- + + + + + + +---- + +The `` portion within the `` tags is the definition of the actual drawing. + +You are defining a small icon, so it should fit within a square boundary and have a single solid color. + +There are many simple SVG icon examples available online (link:https://www.svgviewer.dev/[here for example]). + +You only need to copy the `` tags from your example SVG within the ` ` tags. + +=== viewBox property +The *link:https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox[viewBox property^]* is in the order `min-x`, `min-y`, `width`, and `height`. + +The first two properties should be `0 0` while the second should match any `width` and `height` properties from the source of your SVG paths. + +`width` and `height` may be directly in the `` tag directly or as part of `viewBox` property in that tag, or perhaps another tag above the `` tags. Use whatever values from your source SVG in the `viewBox` property of the `` tag within your override file. + +=== fill property +You can add the `fill` property to the `` tag to define a different fill color than the default: + +[source,svg] +---- + +---- + +== Testing an icon override file +The + From 5e3b6ee315999274cf28e9654edbcd0970c27b37 Mon Sep 17 00:00:00 2001 From: Bryant Howell - ThoughtSpot <83678239+bryanthowell-ts@users.noreply.github.com> Date: Thu, 19 Dec 2024 13:36:36 -0600 Subject: [PATCH 2/3] Update customize-icons.adoc Added details about testing in the playground, and the CSP settings --- modules/ROOT/pages/customize-icons.adoc | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/modules/ROOT/pages/customize-icons.adoc b/modules/ROOT/pages/customize-icons.adoc index 55c2bbdf2..496a3573c 100644 --- a/modules/ROOT/pages/customize-icons.adoc +++ b/modules/ROOT/pages/customize-icons.adoc @@ -106,5 +106,19 @@ You can add the `fill` property to the `` tag to define a different fill ---- == Testing an icon override file -The +The link:https://try-everywhere.thoughtspot.cloud/v2/#/everywhere/playground/search[Visual Embed SDK Playground^] allows you to easily try out the icon customization framework. +If you check the *Apply custom styles* box, the `customizations` section appears with the default for CSS. + +Paste the following over the entire customization section that appears in the code window: + +[source,JavaScript] +---- + customizations: { + iconSpriteUrl: "https://cdn.jsdelivr.net/gh/thoughtspot/custom-css-demo/icon-override1.svg" + } +---- + +In the public playground linked above, anything from `cdn.jsdeliver.net` is already allowed. + +On your own cluster, make sure to allow any domain you will host the SVG file from via xref:security-settings.adoc[security settings], in the *CSP img-src domains* section. From 9090a9633f20c1dfb398f0ccc73f8fc242eb3d7f Mon Sep 17 00:00:00 2001 From: ShashiSubramnya Date: Thu, 2 Jan 2025 22:53:49 +0530 Subject: [PATCH 3/3] edits --- modules/ROOT/pages/customize-icons.adoc | 29 +++++++++++++++---------- 1 file changed, 17 insertions(+), 12 deletions(-) diff --git a/modules/ROOT/pages/customize-icons.adoc b/modules/ROOT/pages/customize-icons.adoc index 496a3573c..12e2c1a75 100644 --- a/modules/ROOT/pages/customize-icons.adoc +++ b/modules/ROOT/pages/customize-icons.adoc @@ -10,7 +10,7 @@ You can customize the icons on a ThoughtSpot page using an icon sprite SVG file To override an icon: -. Open the ThoughtSpot application page and locate the icon that you want to replace. +. Open the ThoughtSpot application page and locate the icon you want to replace. .. Right-click on the icon and select *Inspect*. .. Inspect the `` element. .. Note the icon ID. @@ -70,7 +70,7 @@ image::./images/post-icon-override.png[After icon override] |====== == Creating an icon override -The basic structure of an icon override file is: +The basic structure of an icon override file is shown in the following snippet: [source,svg] ---- @@ -86,16 +86,17 @@ The `` portion within the `` tags is the definition of the actua You are defining a small icon, so it should fit within a square boundary and have a single solid color. -There are many simple SVG icon examples available online (link:https://www.svgviewer.dev/[here for example]). +There are many simple SVG icon examples available online, for example, the link:https://www.svgviewer.dev/[SVG viewer site, window=_blank]. You only need to copy the `` tags from your example SVG within the ` ` tags. === viewBox property -The *link:https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox[viewBox property^]* is in the order `min-x`, `min-y`, `width`, and `height`. + +The link:https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox[viewBox property^] is in the order `min-x`, `min-y`, `width`, and `height`. The first two properties should be `0 0` while the second should match any `width` and `height` properties from the source of your SVG paths. -`width` and `height` may be directly in the `` tag directly or as part of `viewBox` property in that tag, or perhaps another tag above the `` tags. Use whatever values from your source SVG in the `viewBox` property of the `` tag within your override file. +The `width` and `height` properties may be added directly in the `` tag, or as part of `viewBox` property in that tag, or perhaps in another tag above ``. Use the values from your source SVG in the `viewBox` property of the `` element within your override file. === fill property You can add the `fill` property to the `` tag to define a different fill color than the default: @@ -106,12 +107,14 @@ You can add the `fill` property to the `` tag to define a different fill ---- == Testing an icon override file -The link:https://try-everywhere.thoughtspot.cloud/v2/#/everywhere/playground/search[Visual Embed SDK Playground^] allows you to easily try out the icon customization framework. - -If you check the *Apply custom styles* box, the `customizations` section appears with the default for CSS. +The +++Visual Embed SDK Playground +++ allows you to try out the icon customization framework. -Paste the following over the entire customization section that appears in the code window: +To view the code for customization: +. Select the *Apply custom styles* checkbox in the Playground. + +The `customizations` code appears for CSS modifications appears in the code panel. +. Replace the `customization` section with the following code and click *Run* to view the results: ++ [source,JavaScript] ---- customizations: { @@ -119,6 +122,8 @@ Paste the following over the entire customization section that appears in the co } ---- -In the public playground linked above, anything from `cdn.jsdeliver.net` is already allowed. - -On your own cluster, make sure to allow any domain you will host the SVG file from via xref:security-settings.adoc[security settings], in the *CSP img-src domains* section. +[NOTE] +==== +The `cdn.jsdeliver.net` domain is allowed on ThoughtSpot Embedded link:https://try-everywhere.thoughtspot.cloud/v2/#/everywhere/playground/search[public playground] and trial sites. +On your ThoughtSpot application instance, make sure to add the domain that will host the SVG file to xref:security-settings.adoc#csp-trusted-domain[the *CSP img-src domains* allowlist]. +==== \ No newline at end of file