替换stroke为currentColor导致svg变形

zhen-one commented 2 years ago

svg如下

<?xml version="1.0" encoding="UTF-8"?>
<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <title>icon_schedule</title>
    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.55">
        <g id="主数据配置-1姓名-默认" transform="translate(-52.000000, -784.000000)" fill-rule="nonzero">
            <g id="ADD、" transform="translate(20.000000, 156.000000)">
                <g id="字段备份-8" transform="translate(32.000000, 628.000000)">
                    <g id="编组-16" transform="translate(4.000000, 6.000000)">
                        <line x1="1" y1="12.5" x2="16" y2="12.5" id="直线" stroke="#000000" stroke-linecap="round"></line>
                        <g id="123" fill="#000000">
                            <polygon id="路径" points="2.51872399 8.83969466 1.65325936 8.83969466 1.65325936 1.20229008 0 2.10687023 0 1.16793893 1.87517337 0.160305344 2.51872399 0.160305344"></polygon>
                            <path d="M5.53675451,8.01526718 L9.46463245,8.01526718 L9.46463245,8.83969466 L4.38280166,8.83969466 L4.38280166,8.09541985 L6.95700416,5.0610687 C7.48220065,4.42748092 7.85760518,3.90458015 8.08321775,3.49236641 C8.30883033,3.08015267 8.42163662,2.69465649 8.42163662,2.33587786 C8.42163662,1.8778626 8.27924179,1.50954198 7.99445215,1.23091603 C7.70966251,0.952290076 7.33425798,0.812977099 6.86823856,0.812977099 C6.48358761,0.812977099 6.13777161,0.929389313 5.83079057,1.16221374 C5.52380952,1.39503817 5.27415626,1.73664122 5.08183079,2.1870229 L4.34951456,1.80916031 C4.57142857,1.22900763 4.90060102,0.782442748 5.3370319,0.469465649 C5.77346278,0.15648855 6.29126214,0 6.89042996,0 C7.36384651,0 7.78363384,0.0935114504 8.14979196,0.280534351 C8.51595007,0.467557252 8.80073971,0.734732824 9.00416089,1.08206107 C9.20758206,1.42938931 9.30929265,1.83206107 9.30929265,2.29007634 C9.30929265,2.73282443 9.18539066,3.20610687 8.93758669,3.70992366 C8.68978271,4.21374046 8.28478964,4.79770992 7.72260749,5.46183206 L5.53675451,8.01526718 Z" id="路径"></path>
                            <path d="M13.0818308,3.76717557 C13.2223763,3.73664122 13.3814147,3.72137405 13.5589459,3.72137405 C13.9731854,3.72137405 14.3670828,3.82061069 14.740638,4.01908397 C15.1141933,4.21755725 15.4174757,4.51145038 15.6504854,4.90076336 C15.8834951,5.29007634 16,5.75954198 16,6.30916031 C16,6.85114504 15.889043,7.32442748 15.667129,7.72900763 C15.445215,8.13358779 15.1308368,8.44656489 14.7239945,8.66793893 C14.3171521,8.88931298 13.8511327,9 13.3259362,9 C12.7267684,9 12.1886269,8.83396947 11.7115118,8.5019084 C11.2343967,8.16984733 10.8848821,7.70992366 10.6629681,7.1221374 L11.4507628,6.82442748 C11.8132224,7.72519084 12.4493759,8.17557252 13.3592233,8.17557252 C13.8844198,8.17557252 14.3079057,8.00572519 14.629681,7.66603053 C14.9514563,7.32633588 15.112344,6.8740458 15.112344,6.30916031 C15.112344,5.74427481 14.9477577,5.29198473 14.6185853,4.95229008 C14.2894129,4.61259542 13.8511327,4.44274809 13.3037448,4.44274809 C12.9560795,4.44274809 12.6269071,4.53435115 12.3162275,4.71755725 L11.8391123,4.04198473 L14.4133148,0.973282443 L10.8737864,0.973282443 L10.8737864,0.160305344 L15.5450763,0.160305344 L15.5450763,0.904580153 L13.0596394,3.72137405 L13.0818308,3.76717557 Z" id="路径"></path>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

使用插件引入会加粗

查看引入svg文件发现是由于stroker currentColor

 content = content.replace(/stroke="[a-zA-Z#0-9]*"/, 'stroke="currentColor"')

某些情况下我不需要改变svg的颜色！

vimcaw commented 2 years ago

已经有相关 PR 了：https://github.com/vbenjs/vite-plugin-svg-icons/pull/68 不过貌似此库欠缺维护了，上一次更新还是一月份，而且 PR 也没人处理。

zhen-one commented 2 years ago

已经有相关 PR 了：#68 不过貌似此库欠缺维护了，上一次更新还是一月份，而且 PR 也没人处理。

感谢！看来不能使用了

tangxiangmin commented 2 years ago

可以临时处理一下，把vite-plugin-svg-icons/dist/index.js下面的

content = content.replace(/stroke="[a-zA-Z#0-9]*"/, 'stroke="currentColor"');

这行代码注释掉，然后npx patch-package vite-plugin-svg-icons 打个补丁，希望能把上面的PR合并了，然后更新一下npm上面的版本

zhen-one commented 2 years ago

可以临时处理一下，把vite-plugin-svg-icons/dist/index.js下面的
content = content.replace(/stroke="[a-zA-Z#0-9]*"/, 'stroke="currentColor"');
这行代码注释掉，然后npx patch-package vite-plugin-svg-icons 打个补丁，希望能把上面的PR合并了，然后更新一下npm上面的版本

学到了谢谢😘

Fuphoenixes commented 1 year ago

降级到v1.0.1版本就没这个问题了

digitalacorn commented 1 year ago

I have published a forked version which supports disabling the replacement of the stroke colour. https://www.npmjs.com/package/@digitalacorn/vite-plugin-svg-icons

vbenjs / vite-plugin-svg-icons

替换stroke为currentColor导致svg变形 #74