UI download SVG file, why can’t the color follow the text?

knowledge

  • currentcolor keyword
  • svg
  • svg-icon

The solution

Will download downsvgThe graphics in the file to controlfillProperty delete (delete the best first formatting the file)

origin

Take a look at a simple SVG-Icon component

<template>
    <svg :class="className" xmlns="http://www.w3.org/2000/svg">
        <title v-if="title">{{ title }}</title>
        <use :xlink:href="iconPath" xmlns:xlink="http://www.w3.org/1999/xlink" />
    </svg>
</template>

<script>
export default {
    name: 'svg-icon'.props: {
        name: {
            type: String.required: true
        },

        title: {
            type: String.default: null}},computed: {
        iconPath() {
            let icon = require(`@/assets/icons/The ${this.name}.svg`)
            if (Object.prototype.hasOwnProperty.call(icon, 'default')) {
                    icon = icon.default
            }

            return icon.url
        },

        className() {
            return 'svg-icon svg-icon--' + this.name
        }
    }
}
</script>

<style>
.svg-icon {
    fill: currentColor;
    height: 24px;
    width: 24px;
}
</style>
Copy the code

The component style is set to fill: currentColor. CurrentColor will take the value of its own property color, and color is inherited, so it can synchronize the color with the text color. The UI downloaded the SVG file (below)


      
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g transform="Translate (911.000000, 406.000000)" fill="# 000000" fill-rule="nonzero">
            <g transform="Translate (274.000000, 72.000000)">
                <g transform="Translate (475.000000, 60.000000)">
                    <g  transform="Translate (150.000000, 262.000000)">
                        <g transform="Translate (12.000000, 12.000000)">
                            <rect opacity="0" x="0" y="0" width="16" height="16"></rect>
                            <path
                                d="M15.3039006,2.32986338 C15.3035019,2.32966752 15.3033025,2.32939334 15.3031032,2.32919747 C15.0060678,2.11379326 14.6549281,2 14.2876807,2 L1.71239899,2 C1.34511175,2 0.994011959,2.11379326 0.696976583,2.32919747 C0.696737365,2.32939334 0.696577886,2.32966752 0.696179167,2.32986338 C0.260195037,2.64625176,3.15179944,3.68245605 L0,12.3176223 C0,13.2453606 0.768145438,14 1.71235911,14 L14.2876409,14 C15.2318944,14 16 13.2453215 16 12.3176223 L16, 3.68249523c16,3.15183862 15.7398448,2.64625176 15.3039006,2.32986338 Z M13.7396206,3.16445185 L8.3729289,8.43725213 C8.17385539,8.63283555 7.82666291,8.6329139 7.62715081,8.43713461 L2.2604193,3.16445185 L13.7396206,3.16445185 Z M14.8148887,12.3176615 C14.8148887,12.6033002 14.5783767,12.8356657 14.2876807,12.8356657 L1.71239899,12.8356657 C1.42170302, 1.1851911,12.6033002 1.1851911,12.3176615 L1.1851911,3.75476668 L6.78919211,9.26044167 C7.11246229,9.57824024 7.54262534,9.75329776 8.00001994,9.75329776 C8.00001994,9.75329776 8.00001994,9.75329776 8.00001994,9.75329776 8.0002193,9.75329776 C8.40031996,9.75329776 8.77956837,9.61940951 9.08473732,9.37290311 C9.1283158,9.33776627 9.17053867,9.30023993 9.21088765,9.26052002 L14.8148887,3.75476668 L14.8148887,12.3176615 Z">
                            </path>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>
Copy the code

Fill can be inherited, so delete it. But before you do that, right-click Minify SVG using VScode’s SVG plugin (the result is as follows)

<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
    <path
        d="M15.304 2.33a1.719 1.719 0 0014.287 2h1.712c -.367 0-.718.114-1.015.33a1.68 1.68 0 000 3.682v8.636c0 13.245.768 14 1.712 14h12.576c.944 0 1.712-.755 1.712-1.682v3.682c0 -.53-.26-1.036-.696-1.352zm-1.564.834l8.373 8.437a.547.547 0 01-.746 0l2.26 3.164h11.48zm1.075 9.154 A.523.523 0 01-.527.518h1.712 a.523.523 0 01-.527-.518v3.755l6.79 9.26c.323.318.754.493 1.211.493 a1.717 0-001.21. 1.717 l5 492. 605-5.506 v8.563 z"
        fill="# 000" fill-rule="nonzero" />
</svg>
Copy the code

So it looks clear, just delete the fill.