Icon

We have implemented custom SVG icons along with Tabler fill and stroke icons using the SVGSprite method.

Each method for adding SVG icons varies slightly. You can explore all available icons on our icon page

You can manage all icons in one place using a common component, SvgIcon.tsx , located in the components folder.

Props Details

Prop	Type	Description
name	string	Keep always Svg ID value = name of icon value
size	number (optional)	Adjusts the size of the SVG icon. The default size is set to 24
type	IconType	Currently, the default value is IconType.STROKE set for the tabler outline icon. Another type is IconType.FILL for tabler fill icon & IconType.CUSTOM for custom icon svg adding
color	string (optional)	To change color of the svg icon
stroke	number (optional)	Adjusts the stroke width of the SVG icon. This prop is not applied when the icon type is IconType.FILL.
twoToneColor	string (optional)	To change seondary color of the svg icon which is only used in IconType.CUSTOM icon type or twotone icon

How to use Icons dynamically?

Icons can be set dynamically based on conditions in SaasAble. you need to pass the type as Custom (IconType.CUSTOM). Check the following code snippet where it is being used:

Note: your name should already exist here for the dynamic icon: public/assets/svg/sprite-custom.svg

// @project
import { IconType } from '@/enum';

export const feature6 = {
  // other data...
  features: [
    {
      icon: { name: 'custom-data', type: IconType.CUSTOM }, // Icon data
      title: 'Bring your Data Model',
      content: 'Collect relevant customer information efficiently.'
    },
    ...
  ]
};