![]() ![]() I tend to think that styling icons like we did in this post is a bit simpler than I've seen in some projects with background images. It's great that the language is very flexible in terms of type but also it can be more restrict when we think that we're going to benefit the most.Īs an alternative I have to mention that you can also serve your icons SVGs embeded into the CSS as background images, or even other approaches, which is also a good alternative. And as an Elixir developer I really like the idea of having guards to tell us very early in the process of calling an icon with a typo. The final combined file will very likely be small enough, it can be compacted and that will be easily cached by the browser. The idea of serving all small icons, and possibly logos and other small images out of a single image seems good to me in most cases. Similarly you can change this helper to make it as a HEEX component very easily if your app uses phoenix live-view. We are also using guards for the name and the size arguments for better typo checking. We are using the magic so if we change the icons.svg file this icon.ex file is re-compiled. So we'll end up generating svgs with a class that represents that sizes so we can style with css, so for now let's keep this in mind. There's a bunch of different ways to style those svgs, and by styling I mean to change size and color.įor sizes I imagine that a website should have maybe about 3 different sizes you could pick for an icon, so let's say small, medium, large.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |