Environment: small program built by MPX framework; Function: ICONS change color according to backend Settings

The first SVG icon to be used is an unshaded icon and is a file stored locally in the project. If the UI icon is SVG with a background color, you can log in to Alibaba Font Vector website and upload the SVG. When uploading, there will be an option: remove the background color. Once uploaded, the SVG is downloaded with the background removed. Back to the body, how do I make SVG color change? It is well known that applets currently do not support SVG ICONS, nor font ICONS, but how to implement this effect? See below for details.

Start by creating a common component that uses backgroundImage to implement this functionality.

<template minapp='native' xlang='wxml'> <view class="m-icon {{iconClass}} mini-class" bindtap="_tap" style='background-image:url("{{backgroundImage}}"); {{miniStyle}}' ></view> </template> {icon: {type: String, value: '', observer: function(d) { // svg if (d && ! this.data.backgroundImage) { this.setData({ backgroundImage: svgIcon(d, This.data.color)})} if (d) {let className = iconClassName(d) if (className) {this.setData({iconClass: className }) } } } }, color: { type: String, value: '', observer: function(d) { // svg if (d && this.data.icon) { this.setData({ backgroundImage: SvgIcon (this.data.icon, d)})}}, miniStyle: {type: String, value: ", observer: function(e) {// style}}}, data: { backgroundImage: '', iconClass: '' }, methods: { _tap(e) { this.triggerEvent('minitap', e) } }Copy the code

Declare a class, svgIcon, to handle related methods.

class SVGCON { constructor() {} svgXml(n, c) { let name = n; let data = ""; let casualData = this[name](); let newArray = []; let color = "black"; let newFill = ""; / / color conversion if (c && c.i ndexOf (" # "> = 0) {color = c.r eplace (" #", "% 23"); } else if (c) { color = c; } newFill = "fill=" + "'" + color + "'"; NewArray = casualData.split("></path>"); // Add fill=color(SVG drops fill=color related code) // Find number of paths in SVG; casualData = ""; for (let i = 0; i < newArray.length; i++) { if (i == newArray.length - 1) { } else { newArray[i] = newArray[i] + " " + newFill + "></path>"; } casualData = casualData + newArray[i]; } // Convert to SVG + XML data = casualData; data = data.replace("<", "%3C"); data = data.replace(">", "%3E"); data = "data:image/svg+xml," + data; Data = data.replace(/\"/g, "'"); return data; } plus() {return "SVG file code "; } } export { SVGCON };Copy the code

The next step is to use this class

let newSvg = new SVGCON(); Function svgNameSwtich(t){let name = t; let newArray = name.split('-'); let switchName = ''; for(let i = 0; i < newArray.length; i++){ if(i ! = 0){ let word = newArray[i]; NewArray [I] = word. The substring (0, 1). The toUpperCase () + word. The substring (1); } switchName = switchName + newArray[i] } return switchName; } export function svgIcon(t,c){ let name = ''; If (t){// t converts to the corresponding SVG function name = svgNameSwtich(t); return newSvg.svgXml(name,c); } } export function iconClassName(t){ let classType = t; let className = ''; switch (classType){ case 'loading': className = 'm-icon-loading' break; default: break; } return className; }Copy the code