There are many different ways I’ve found which allow you to use any SVG you’d like inside of ServiceNow’s UI Framework. Unfortunately this information is scattered across the web and took me some time to figure out. I hope to save you some time by centralizing it here :)
Method 1
For this method you will copy the svg element into your code but prefix all attributes with ‘attr’ or use the ‘attrs’ object notation
Before
1
2
3
<svg class="context-menu-icon" xmlns="http://www.w3.org/2000/svg" height="24px" width="24px">
<path d="M17.8 15.65 16.7 14.55 18.55 12 15.175 7.25Q15.075 7.125 14.95 7.062Q14.825 7 14.675 7H9.15L7.65 5.5H14.7Q15.2 5.5 15.663 5.737Q16.125 5.975 16.425 6.4L20.375 12ZM19.225 22.025 15.5 18.3Q15.35 18.4 15.138 18.45Q14.925 18.5 14.7 18.5H5.3Q4.55 18.5 4.025 17.975Q3.5 17.45 3.5 16.7V7.3Q3.5 7.1 3.55 6.9Q3.6 6.7 3.7 6.5L1.775 4.575L2.85 3.525L20.275 20.975ZM9.575 12.4Q9.575 12.4 9.575 12.4Q9.575 12.4 9.575 12.4ZM12.925 10.775Q12.925 10.775 12.925 10.775Q12.925 10.775 12.925 10.775ZM14.2 17 5 7.8V16.7Q5 16.8 5.1 16.9Q5.2 17 5.3 17Z"/>
</svg>
After
1
2
3
<svg attrs={{class: "context-menu-icon", xmlns: "http://www.w3.org/2000/svg", height: "24px", width: "24px"}}>
<path attr-d="M17.8 15.65 16.7 14.55 18.55 12 15.175 7.25Q15.075 7.125 14.95 7.062Q14.825 7 14.675 7H9.15L7.65 5.5H14.7Q15.2 5.5 15.663 5.737Q16.125 5.975 16.425 6.4L20.375 12ZM19.225 22.025 15.5 18.3Q15.35 18.4 15.138 18.45Q14.925 18.5 14.7 18.5H5.3Q4.55 18.5 4.025 17.975Q3.5 17.45 3.5 16.7V7.3Q3.5 7.1 3.55 6.9Q3.6 6.7 3.7 6.5L1.775 4.575L2.85 3.525L20.275 20.975ZM9.575 12.4Q9.575 12.4 9.575 12.4Q9.575 12.4 9.575 12.4ZM12.925 10.775Q12.925 10.775 12.925 10.775Q12.925 10.775 12.925 10.775ZM14.2 17 5 7.8V16.7Q5 16.8 5.1 16.9Q5.2 17 5.3 17Z"/>
</svg>
Method 2
For this method we will store the svg’s as files inside the project. To Be Continued…