zsw-jx-store/src/static/style/mixin-svg.scss

@mixin svg_icon ($id, $color) {
    // $bg: rgba(red($color), green($color), blue($color), $alpha);

    @if $id ==star {
        background-image: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cpath d='M480.493 264.641c-191.932 0-347.527 155.592-347.527 347.527 0 191.933 155.595 347.527 347.527 347.527S828.02 804.101 828.02 612.168c0-191.935-155.594-347.527-347.527-347.527zm178.694 316.532l-68.521 66.792 16.175 94.312c5.433 31.662-12.654 45.507-41.65 30.262l-84.697-44.53-84.697 44.53c-28.432 14.947-47.19 2.027-41.65-30.262l16.176-94.312-68.521-66.792c-23.002-22.42-16.51-44.252 15.908-48.962l94.694-13.76 42.35-85.81c14.217-28.804 36.986-29.374 51.483 0l42.35 85.81 94.693 13.76c31.788 4.619 39.367 26.097 15.907 48.962zm146.18-516.87H590.49c-11.596 0-20.893 8.118-23.62 18.866l-66.24 130.608s141.828 8.533 225.607 89.209l98.934-199.642c2.932-4.076 5.02-8.812 5.02-14.218-.001-13.708-11.115-24.822-24.824-24.822zM456.854 213.778l-66.24-130.608c-2.727-10.748-12.023-18.865-23.62-18.865H152.118c-13.709 0-24.824 11.115-24.824 24.823 0 5.406 2.088 10.142 5.022 14.218l98.933 199.642c83.777-80.677 225.605-89.21 225.605-89.21z' fill='%23#{$color}'/%3E%3C/svg%3E");
    }

    @if $id ==question {
        background-image: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M513.526 3.435C232.154 3.435 4.057 230.647 4.057 510.924s228.097 507.478 509.469 507.478c281.377 0 509.474-227.201 509.474-507.478S794.903 3.435 513.526 3.435zm0 958.592c-250.112 0-452.86-201.962-452.86-451.102 0-249.129 202.748-451.091 452.86-451.091s452.872 201.962 452.872 451.091c-.001 249.14-202.76 451.102-452.872 451.102zm-46.549-165.26h97.032v-67.941h-97.032v67.941zm190.668-529.621c-33.014-30.071-77.259-45.098-132.729-45.098-52.368 0-94.479 14.007-126.344 42.014-31.865 28.013-51.015 68.364-57.457 121.035l71.587 8.481c6.193-39.319 19.213-68.228 39.077-86.723 19.869-18.512 44.63-27.759 74.304-27.759 30.699 0 56.631 10.217 77.78 30.646 21.143 20.429 31.729 44.129 31.729 71.121 0 14.897-3.612 28.656-10.841 41.242-7.218 12.591-22.892 29.496-47.013 50.686-24.115 21.207-40.82 37.334-50.11 48.38-12.641 15.162-39.49 30.19-45.156 45.098-7.75 19.792-11.616 8.063-11.616 35.293 0 4.629.13 11.565.385 20.812h84.635c.521-27.748 2.457-12.546 5.814-24.878 3.34-12.343 8.514-23.26 15.477-32.772 6.963-9.501 21.789-24.292 44.494-44.32 33.795-29.812 56.501-55.118 68.117-75.942 11.605-20.812 17.407-43.553 17.407-68.228-.002-42.658-16.515-79.017-49.54-109.088z' fill='%23#{$color}'/%3E%3C/svg%3E");
    }

    @if $id ==modify {
        background-image: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M948.9 141.9l-64.2-64.2c-25.3-25.3-66.6-25.3-91.9 0L265.2 605.4l-36.6 139.5-.2.9c-2.5 13.5 1.7 27.5 11.3 37.3 8.1 8.3 19.1 12.9 30.5 12.9 2.1 0 4.3-.2 6.5-.5l.9-.1L421 761.8l527.9-527.9c12.2-12.3 19-28.6 19-46s-6.7-33.7-19-46zM395.6 716.4l-115 26.9L310 631.2l44-44 85.4 85.4-43.8 43.8zm79.1-79.2l-85.4-85.4 346.5-346.5 85.4 85.4-346.5 346.5zm438.7-438.6l-56.8 56.8-85.4-85.4 56.8-56.8c5.8-5.8 15.4-5.8 21.2 0l64.2 64.2c2.8 2.8 4.4 6.6 4.4 10.6s-1.6 7.8-4.4 10.6z' fill='%23#{$color}'/%3E%3Cpath d='M836.5 477.8c-13.8 0-25 11.2-25 25V890c0 8.3-6.7 15-15 15h-640c-8.3 0-15-6.7-15-15V250c0-8.3 6.7-15 15-15h357.8c13.8 0 25-11.2 25-25s-11.2-25-25-25H156.5c-35.9 0-65 29.1-65 65v640c0 35.9 29.1 65 65 65h640c35.9 0 65-29.1 65-65V502.8c0-13.8-11.2-25-25-25z' fill='%23#{$color}'/%3E%3C/svg%3E")
    }

    @if $id ==loading {
        background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIiBjbGFzcz0ibGRzLXJvbGxpbmciIHN0eWxlPSJiYWNrZ3JvdW5kOjAgMCI+PGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNEVCMzMxIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4IiB0cmFuc2Zvcm09InJvdGF0ZSgxMjYuNzc2IDUwIDUwKSI+PGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIGNhbGNNb2RlPSJsaW5lYXIiIHZhbHVlcz0iMCA1MCA1MDszNjAgNTAgNTAiIGtleVRpbWVzPSIwOzEiIGR1cj0iMC43cyIgYmVnaW49IjBzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIvPjwvY2lyY2xlPjwvc3ZnPg==")
    }

    @if $id ==msgnotice {
        background-image: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M0 512a512 512 0 1 0 1024 0A512 512 0 1 0 0 512z' fill='%23e6e6e6' data-spm-anchor-id='a313x.7781069.0.i8'/%3E%3Cpath d='M256 788.48h-4.096c-14.336 0-26.624-6.144-34.816-16.384-8.192-10.24-12.288-20.48-12.288-34.816V331.776c0-69.632 57.344-126.976 126.976-126.976h358.4c69.632 0 126.976 57.344 126.976 126.976V624.64c0 43.008-34.816 77.824-77.824 77.824H372.736l-81.92 71.68c-10.24 10.24-22.528 14.336-34.816 14.336zM331.776 256c-43.008 0-77.824 34.816-77.824 77.824V737.28l96.256-83.968h389.12c14.336 0 24.576-12.288 24.576-24.576v-296.96c0-43.008-34.816-77.824-77.824-77.824H331.776z' fill='%23FFF'/%3E%3Cpath d='M354.304 460.8a30.72 30.72 0 1 0 61.44 0 30.72 30.72 0 1 0-61.44 0zM481.28 460.8a30.72 30.72 0 1 0 61.44 0 30.72 30.72 0 1 0-61.44 0zM608.256 460.8a30.72 30.72 0 1 0 61.44 0 30.72 30.72 0 1 0-61.44 0z' fill='%23FFF'/%3E%3C/svg%3E")
    }

    @if $id ==scancode {
        background-image: url("data:image/svg+xml,%3Csvg class='icon' viewBox='0 0 1235 1024' xmlns='http://www.w3.org/2000/svg' width='50' height='50'%3E%3Cpath d='M65.434 470.245h1023.659v83.382H65.434v-83.382zm-.128-138.854h78.815V83.082H459.17V0H65.306v331.39zM695.529 0v83.082h314.791v248.309h79.029V0h-393.82zm314.791 940.662H695.53V1024h393.478V692.567h-78.687v248.095zM144.121 692.567H65.306V1024h393.863v-83.338H144.12V692.567z' fill='%23fff'/%3E%3Cpath d='M350.44 404.019V220.017h-69.896v184.002h69.896zm34.82 0h34.949V220.017h-34.948v184.002zm418.954-184.002v184.002h69.769V220.017h-69.769zm-104.717 0H652.9v184.002h46.598V220.017zm-104.717 0h-58.204v184.002h58.204V220.017zm279.203 606.24v-208.58h-69.769v208.58h69.769zm-384.005-606.24h-23.171v184.002h23.17V220.017zm267.638 0h-23.298v184.002h23.298V220.017zM652.9 826.257h46.598v-208.58H652.9v208.58zm104.717-208.58h-23.298v208.58h23.298v-208.58zm-372.355 208.58h34.948v-208.58h-34.948v208.58zm-34.82 0v-208.58h-69.897v208.58h69.896zm186.135 0h58.204v-208.58h-58.204v208.58zm-69.77 0h23.172v-208.58h-23.171v208.58z' fill='%23fff'/%3E%3C/svg%3E")
    }
}