The SVG Component is a feature that allows users to insert and customize SVGs directly within their projects. Whether you’re using icons from our new Icons Setting or uploading your own SVG files, this component offers a range of options to help you create visually appealing designs.
Inserting SVGs into Your Project
Uploading Your Own SVG
- Store: Search for the “SVG Component” in the store.
- Drag and Drop: Drag and drop the SVG component onto the editor.
- SVG Component Settings: Right click to open the component settings and select “Edit SVG”.
- Drag and Drop: Drag and drop your chosen SVG file onto the SVG Component Settings.
Using an SVG code
- Store: Search for the “SVG Component” in the store.
- Drag and Drop: Drag and drop the SVG Component onto the editor.
- SVG Component Settings: Right click to open the component settings and select “Edit SVG”.
- Paste the Code: Paste the SVG Code onto the SVG Component Settings.
Customizing SVG Colors
You can modify the colors of your SVG to suit the design and feel of your project. Customization options are available for each interactive state (normal, hover, and click):
- Select the SVG Component: Click on the SVG in the editor.
- Open SVG Component Settings: Go to the component settings menu.
- Customize Colors:
- Normal State: Adjust the default colors.
- Hover State: Change colors for when the SVG is hovered over.
- Click State: Set colors for when the SVG is clicked.
Previewing SVG States
The SVG Component allows you to preview how your SVG will look in different states:
- Normal State: This is the default appearance of the SVG when there is no user interaction.
- Hover State: Preview how the SVG will appear when a user hovers over it.
- Active State: See the SVG’s appearance when clicked by a user.