The minified tabler-sprite-outline.svg file is already included here: public/assets/svg, allowing you to use any of the Tabler stroke icons. To add an icon, simply reference its name from the icon list.
To add a new Tabler outline icon, refer to the icon list and get the icon name.
Use the format tabler-[iconname] in your code. Here's an example:
// import common components
import SvgIcon from '@/components/SvgIcon';
<SvgIcon
name="tabler-check" // Make sure this name available in tabler outline icon
type={IconType.STROKE} // It is the default set so no need to add this for this icon
size={16} // Change icon size
color="text.secondary" // Change icon color
stroke={2} // Change icon stroke width
/>
Tabler fill icons
We have created a separate file, tabler-sprite-fill.svg , located in the public/assets/svg path.
Only the usable fill SVG icons are included in this file at this moment.
How can I add new fill icons?
To add a new fill icon, copy the SVG code from the icon list.
Include the above code in the tabler-sprite-fill.svg file. between the SVG tag
Customize as per other icons already added
Replace SVG with symbol tag
Remove width & height attributes
Also, remove the class & add id attributes with a specific name, here is an example:
Remove: class="icon icon-tabler icons-tabler-filled icon-tabler-star"
Add: id="tabler-filled-star"
After adding a new svg then use this svg id in your files
Icon.tsx file (example)
// import common components
import SvgIcon from '@/components/SvgIcon';
<SvgIcon
name="tabler-filled-star" // Add id which is added in tabler-sprite-fill.svg
type={IconType.FILL} // Change icon type for fill icon
size={16} // Change icon size
color="text.secondary" // Change icon color
/>