SVG element logo

SVG element

Published June 2024
   •    Updated this week

Plugin details

Made for SVG icons, but works with ANY SVG code. You can modify colours and size dynamically or simply change the SVG code with a conditional, and its clickable.
Perfect for:
⭐ Icons
⭐ Copying SVG's straight from Figma (no file export)
⭐ SVG animation
⭐ Dynamic colouring (e.g. dark mode)
⭐ Speed. Doesn't rely on fetching svg files or external JS packages.
⭐ Multi-coloured SVG. Each colour can be dynamically coloured too (up to 10 colours).

Features:
📌 Animations (Spin)
📌 Dynamic stroke colour and width
📌 Dynamic fill colour
📌 Tooltip (can be customised*)
📌 Icons are clickable

Free SVG icon libraries:
🔗 https://www.untitledui.com/free-icons
🔗 https://phosphoricons.com/
🔗 https://www.radix-ui.com/icons
🔗 https://lucide.dev/icons/


* Tooltip customisation is not in this plugin but with another of our plugins called 'Custom tooltip' it can be customised.

----------------------------------------------------

💬 COMMUNITY
If you need any other instructions please contact me in our Createbase community @ https://discord.gg/sdbxfjvvYx.

Free

For everyone

5.0 stars   •   1 ratings
737 installs  
This plugin does not collect or track your personal data.

Other actions

Platform

Web

Contributor details

Createbase logo
Createbase
Joined 2021   •   5 Plugins
View contributor profile

Instructions

How to get SVG code from a SVG file:
1. Open the SVG file as a text document (notepad or something similar)

2. Copy all the text

3. Paste it in the 'SVG code' text box in the plugin.


----------------------------------------------------


How to get click from SVG element:

1. Make sure 'This element isn't clickable' isn't checked.

2. Got to the workflow page, click to add a new event and then in the 'Elements' section choose 'A SVG ⭐ is clicked', then select which SVG element you are working with.

3. Now you can add your workflows.


----------------------------------------------------

If you need any other instructions please contact me in our Createbase community @ https://discord.gg/sdbxfjvvYx.

Types

This plugin can be found under the following types:
Element   •   Event

Categories

This plugin can be found under the following categories:
Containers   •   Media   •   Image   •   Visual Elements

Resources

Support contact
Documentation
Tutorial

Rating and reviews

Average rating (5.0)

This plugin works so well and saves me so much time!
November 14th, 2024
Highly recommend this to anyone who wants an easy way to add custom SVGs into their app. Createbase has been so awesome with support via their Discord. I had a small issue (turned out to be a Bubble bug, not a plugin bug) and they were able to address it within 24 hours. Definitely try this one out if you're interested!
Thanks for the great review. So glad it's helping you! (plugin author)
November 14th, 2024
  •  
Createbase
Bubble