How to use SVG icons in WeChat applets

SVG has been widely used in recent years due to its various advantages. Unfortunately, WeChat Mini Programs do not support the use of SVG in the form of XML so far, which greatly reduces the flexibility of SVG. Most people choose to give up using SVG icon solutions in WeChat Mini Programs.
So, is there really no way to happily use SVG icons in WeChat applets? Let's first analyze what requirements we have for using SVG icons:

• Can be introduced for use
• Ability to adjust colors

First of all, there is no problem with the first point. WeChat applet supports the introduction of SVG in the form of Image.src. The next part is the key part of this article, how to make SVG in Image form change color.

In my recent study of CSS, I found that there is a property that can cast a shadow on the non-transparent part of the DOM. This property is drop-shadow, and its value is roughly similar to box-shadow. With this attribute, we can cast a shadow with a modifiable color for the SVG image, and then we can hide the original part to realize a modifiable color SVG icon.

Next, let's practice it. First, construct the DOM structure:

<view class="svg_icon">
 <image class="svg_icon-inner" src="/path/icon.svg"/>
</view>

Next, add the CSS:

.svg_icon {
 display: inline-flex;
 width: 1em;
 height: 1em;
 overflow: hidden;
}

.svg_icon-inner {
 width: 1em;
 height: 1em;
 transform: translateY(-1em);
 filter: drop-shadow(0 1em 0 currentColor);
}

Let me explain why the DOM structure and CSS are set up like this: first, svg_icon is the container of the entire icon, responsible for setting the icon size (1em = parent container font size) and hiding the excess part (that is, the original part of the icon), while svg_icon-inner is responsible for rendering SVG and casting colored shadows. By setting svg_icon-inner to the same width and height as the parent container and setting an offset in the opposite direction of the projection, the need to change the SVG color can be achieved (setting the projection color to currentColor can make the icon color change with the font color of the parent container).

This solution has a disadvantage. If there is a transform animation in the page and it is triggered, the icon will flicker. I am not sure about the specific reason. I hope someone can give me some advice.

This concludes this article on how to happily use SVG icons in WeChat mini-programs. For more information on using SVG icons in WeChat mini-programs, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!