Tabler
Tabler outline icons
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.svgfile. between the SVG tagCustomize 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
The icon has been successfully added! 👍