Merge pull request #241 from thoughtspot/svg-instruction-update

Svg instruction update

Author: ShashiSubramanya

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 `<svg>` element.
 .. Note the icon ID.
@@ -69,3 +69,61 @@ a|**After** +
 image::./images/post-icon-override.png[After icon override]
 |======
 
+== Creating an icon override
+The basic structure of an icon override file is shown in the following snippet:
+
+[source,svg]
+----
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width:0;height:0;visibility:hidden;">
+   <defs/>
+   <symbol id="rd-icon-name" viewBox="0 0 18 18">
+      <path />
+   </symbol>
+</svg>
+----
+
+The `<path />` portion within the `<symbol>` 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, for example, the link:https://www.svgviewer.dev/[SVG viewer site, window=_blank].
+
+You only need to copy the `<path>` tags from your example SVG within the `<symbol> </symbol>` 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.
+
+The `width` and `height` properties may be added directly in the `<svg>` tag, or as part of `viewBox` property in that tag, or perhaps in another tag above `<path>`. Use the values from your source SVG in the `viewBox` property of the `<symbol>` element within your override file.
+
+=== fill property
+You can add the `fill` property to the `<symbol>` tag to define a different fill color than the default:
+
+[source,svg]
+----
+<symbol id="rd-icon-spotter" viewBox="0 0 222 225" fill="red">
+----
+
+== Testing an icon override file
+The +++<a href="{{navprefix}}/dev-playground">Visual Embed SDK Playground </a>+++ allows you to try out the icon customization framework.
+
+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: {
+    iconSpriteUrl: "https://cdn.jsdelivr.net/gh/thoughtspot/custom-css-demo/icon-override1.svg"
+ }
+----
+
+[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].
+====