Imagine I could change that damn World of Warcraft World to my needs. Really! Imagine I could build all those raid dungeons or buildings there. I mean I wouldn´t have any problem if I could use Phoenix Viewer with World of Warcraft. Some one asked Google for “games that use phoenix viewer”. Today I checked out with what kind of search terms, peoples found my blog. Sometimes it is just funny to see what peoples type into google. In general both approaches are good and we should choose the approach that fits better the project.What kind of games can you play with Phoenix Viewer? :D 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. possibly add a stroke and fill with currentColor.remove height and width as we want to scale them.set a viewBox, so height="48" width="48" became viewBox="0 0 48 48".add an id attribute so it can be referenced later.Then we can manupulate internal svg tags this way: The first thing to do is to combine those into a single file by nesting those on another tag:
#Phoenix viewer sqare icon download
Nesting SVGsįor this post I'll use combine the Hashrocket logo that I got from our website and a home svg icon from Google Fonts, so for now let's download some SVG icons: This is a very simple approach and yet many developers just do not know about that, so hopefully it's going to be useful for you as it was for me. That causes a bunch of small requests to the server and depending on the internet speed the user might feel like icons showing up one by one.Īfter long years of doing that I found out, by pairing with a co-worker, that we can apply a similar technique as CSS Sprites but for SVGs. I've seen developers, including myself, serving those tiny files all individually, which works, but it's not ideal. SVG is a great format for logo and icons due to its flexibility, so it's guarantee that we have to serve a bunch of SVGs from the apps that we build. In the end we'll create a Phoenix Viewer Helper in order to use those icons out of that combined file. In this post we'll go over a technique to combine multiple SVG files into a single one. Elixir Phoenix SVG on Phoenix Applications
0 kommentar(er)
