mimuel Posted July 11, 2019 Share Posted July 11, 2019 Hi, I found an interesting solution for creating an icon library with affinity designer. The icons can be manipulated globally with a CSS file. The effort is relatively low. Simply comment in an interest then I will describe the process here in the forum in detail. michael DDA and Jakerlund 2 Quote Link to comment Share on other sites More sharing options...
Jakerlund Posted July 31, 2019 Share Posted July 31, 2019 @mimuel yes absolutely I want to export simple icons to be used in a html page and be able to change fill color in css. Cheers Quote Link to comment Share on other sites More sharing options...
mimuel Posted August 1, 2019 Author Share Posted August 1, 2019 OK - please wait a moment. The tutorial I have made is written in german language. After translate the tutorial I will public the pdf here. Jakerlund 1 Quote Link to comment Share on other sites More sharing options...
mimuel Posted August 1, 2019 Author Share Posted August 1, 2019 Hi Jakerlund, here is the tutorial - sorry my software-dialogs are not english. Please give me a feedback. Cheers Create a Icon Library.pdf Wosven, César Del Rivero, javiersc and 1 other 4 Quote Link to comment Share on other sites More sharing options...
Jakerlund Posted August 1, 2019 Share Posted August 1, 2019 Thanks @mimuel I'm going to test this tomorrow. Thanks for sharing Quote Link to comment Share on other sites More sharing options...
Jakerlund Posted August 2, 2019 Share Posted August 2, 2019 @mimuel My problem is that i needed the SVG's to work in Wordpress with Elementor. But... since i'm using JetElements i can use plain SVG's and the inline SVG widget which can remove Inline CSS and use custom colors in Elementor for my flat icons. Your workaround will be appreciated when using traditional HTML/CSS though Thanks for sharing! Quote Link to comment Share on other sites More sharing options...
mimuel Posted August 2, 2019 Author Share Posted August 2, 2019 But I think outline-styles in a CSS is the better alternative Quote Link to comment Share on other sites More sharing options...
mimuel Posted August 5, 2019 Author Share Posted August 5, 2019 At HTML5 you can call the SVG with this command: <object data="my_svg.svg" type="image/svg+xml"></object> the svg himsef can include a inline-style or a reference to a outline-style CSS-File Quote Link to comment Share on other sites More sharing options...
César Del Rivero Posted March 16, 2023 Share Posted March 16, 2023 @mimuel Thanks for sharing ! Quote Link to comment Share on other sites More sharing options...
Kylian00 Posted March 25, 2023 Share Posted March 25, 2023 You can create an SVG icon library that can be manipulated by CSS files using three approaches: SVG sprites & CSS background-position SVG sprites & fragment identifiers CSS masks Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.