In today's world, mobile apps are an essential part of our daily lives. With so many apps available on various platforms, it is becoming increasingly important for developers to create apps that are both functional and visually appealing. One way to make your app stand out is by using dynamic icons that can change their colors. By doing so, you can not only enhance the user experience but also create a more personalized and engaging app.
In this blog post, we will explore the benefits of using dynamic icons in app design and provide you with some tips on how to implement them in your own app. So, let's dive in and discover how dynamic icons can take your app design to the next level.
Before listing your tips below, add one last sentence that sums up your paragraph or offers a smooth transition to your listicle.
Step #1 - Download an SVG image (icon)
The first step to adding a dynamic SVG image to Power Apps is to find and download an SVG image (also known as an icon). There are many websites where you can find free SVG images, such as flaticon.com. Once you've found an SVG image that you want to use, download it to your computer.
Step #2 - Open the SVG in a text editor and replace " with '
After you have downloaded the SVG image, the next step is to open it in a text editor, such as Notepad or Visual Studio Code. In the SVG code, you will need to replace all double quotes (") with single quotes ('). This is important because Power Apps uses single quotes for string literals, and using double quotes can cause errors later on. Once you've made the necessary changes, save the file.
Step #3 - Add an image component to your canvas app
Now that you have the SVG image ready, it's time to add it to your Power App. To do this, you will need to add an Image component to your canvas app. You can do this by selecting "Image" from the Insert menu or by dragging the Image component from the left-hand side of the screen onto your canvas.
Step #4 - Copy the SVG-Code into the Image property
With the Image component added to your canvas, the next step is to copy the SVG code into the Image property. Paste the following code snippet to your "Image" property first. Then replace the code between "Start SVG here" and "End SVG here" with your own SVG code.
"data:image/svg+xml;utf8, " & EncodeUrl(
//Start SVG here
"
<svg id='Layer_1' enable-background='new 0 0 512 512' height='512' viewBox='0 0 512 512' width='512' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'><linearGradient id='SVGID_1_' gradientUnits='userSpaceOnUse' x1='141.97' x2='369.742' y1='420.185' y2='192.412'><stop offset='0' stop-color='
"&
CustomColorHex2 //Variable: to be defined elsewhere in the app: Set(CustomColorHex2,#000080)
&"
'/><stop offset='1' stop-color='
"&
CustomColorHex3 //Variable: to be defined elsewhere in the app: Set(CustomColorHex3,#BF9000)
&"
'/></linearGradient><path d='m161.032 226.846c10.763 0 19.498-8.425 19.886-19.18l3.007-83.293c.2-5.527-1.724-10.553-5.564-14.534-3.839-3.979-8.792-6.083-14.321-6.083h-6.016c-5.53 0-10.482 2.104-14.322 6.084s-5.764 9.006-5.564 14.533l3.008 83.292c.387 10.756 9.123 19.181 19.886 19.181zm-5.815-105.898c.817-.847 1.63-1.192 2.807-1.192h6.016c1.176 0 1.99.346 2.806 1.191.816.847 1.132 1.672 1.09 2.848l-3.007 83.293c-.076 2.107-1.788 3.758-3.896 3.758-2.109 0-3.821-1.65-3.897-3.758l-3.008-83.293c-.043-1.176.273-2.001 1.089-2.847zm5.815 117.109c-12.816 0-23.244 10.428-23.244 23.244s10.427 23.243 23.244 23.243 23.244-10.427 23.244-23.243-10.428-23.244-23.244-23.244zm0 30.487c-3.994 0-7.244-3.249-7.244-7.243s3.25-7.244 7.244-7.244 7.244 3.25 7.244 7.244-3.25 7.243-7.244 7.243zm337.714 154.471-56.438-54.766c-3.317-3.22-7.718-4.944-12.339-4.885-2.468.037-4.841.597-7.013 1.599l-22.491-22.069c10.302-16.815 16.249-36.575 16.249-57.699 0-61.081-49.693-110.774-110.773-110.774-11.335 0-22.276 1.715-32.581 4.892l-66.038-114.378c-9.662-16.735-26.967-26.727-46.291-26.727s-36.628 9.991-46.291 26.727l-99.531 172.393c-9.662 16.735-9.662 36.717 0 53.452 9.662 16.734 26.966 26.726 46.291 26.726h138.478c13.862 45.368 56.117 78.462 105.962 78.462 24.83 0 47.778-8.212 66.271-22.062l21.603 21.201c-.877 2.142-1.327 4.46-1.291 6.849.07 4.64 1.935 8.968 5.252 12.186l56.439 54.766c3.364 3.265 7.722 4.889 12.075 4.889 4.529 0 9.053-1.759 12.448-5.257l20.376-20.999c3.22-3.317 4.954-7.699 4.884-12.34-.069-4.639-1.935-8.967-5.251-12.186zm-87.766-47.388-6.912 7.123-19.735-19.367c2.338-2.344 4.569-4.794 6.691-7.338zm-349.48-74.121c-13.54 0-25.665-7-32.434-18.726-6.77-11.726-6.77-25.727 0-37.452l99.532-172.394c6.77-11.726 18.895-18.727 32.434-18.727s25.664 7.001 32.434 18.727l64.821 112.272c-37.296 17.847-63.12 55.957-63.12 99.988 0 5.541.414 10.987 1.204 16.312zm149.667-16.312c0-52.259 42.515-94.774 94.773-94.774s94.773 42.516 94.773 94.774-42.515 94.773-94.773 94.773-94.773-42.515-94.773-94.773zm276.465 151.202-20.376 21c-.499.513-1.387.526-1.9.028l-56.439-54.766c-.32-.312-.392-.686-.396-.944s.057-.635.367-.955l20.377-21c.311-.32.685-.393.944-.396h.022c.258 0 .621.065.933.368l56.438 54.766c.321.312.394.687.397.945s-.056.633-.367.954zm-181.692-233c-45.103 0-81.797 36.694-81.797 81.798 0 45.103 36.694 81.797 81.797 81.797s81.797-36.694 81.797-81.797-36.694-81.798-81.797-81.798zm0 147.595c-36.281 0-65.797-29.517-65.797-65.797 0-36.281 29.517-65.798 65.797-65.798s65.797 29.517 65.797 65.798-29.516 65.797-65.797 65.797z' fill='url(#SVGID_1_)'/></svg>
" //End SVG here
)Step #5 - Make it dynamic by replacing the color value with a variable
The final step is to make the SVG image dynamic by replacing the color value with a variable. This allows you to change the color of the icon based on user input or other dynamic data.
In the example above this was done by replacing the HEX-Color-Code of the original SVG with a variable CustomColorHex2 that was defined elsewhere in the Power Apps:
CustomColorHex2 //Variable: to be defined elsewhere in the app: Set(CustomColorHex2,#000080)Once you've done this, you can use the Set function to update the variable and change the color of the icon dynamically.
Conclusion
In conclusion, adding dynamic SVG images to your Power Apps is a great way to make your app stand out and provide a more personalized and engaging user experience. By following the steps outlined in this blog post, you can easily add SVG icons to your Power Apps and make them dynamic by replacing the color value with a variable. This will allow you to change the color of the icon based on user input or other dynamic data, adding a level of interactivity to your app that will keep users engaged and coming back for more. So, give it a try and take your Power Apps to the next level with dynamic SVG images!
Please do not hesitate to contact us, if you have any questions. Book free appointment here:
Comments