2

在我的 global.css 中，我内联了 svg，如下所示：

.icon-generated-list {
  background-image: url("data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E %3Csvg class='icon-generated-list' width='14px' height='14px' viewBox='0 0 14 14' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' fill='%23333'%3E %3C!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch --%3E %3Ctitle%3Esystem generated list icon%3C/title%3E %3Cdesc%3ECreated with Sketch.%3C/desc%3E %3Cdefs/%3E %3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cg id='system-generated-list-icon'%3E %3Cg id='Group-5'%3E %3Cpath d='M8.15363508,4.38107945 L11.0230591,4.38107945 C11.0253247,4.38072702 11.027968,4.38072702 11.0302336,4.38107945 C11.1865623,4.38107945 11.3134377,4.26266237 11.3134377,4.11675561 C11.3134377,4.02618065 11.264349,3.9458262 11.1895831,3.89824791 L7.15751183,0.0785922868 C7.07708186,0.00246702245 6.9551153,-0.0200886114 6.84825295,0.0193837479 C6.74214581,0.060618266 6.6726664,0.156832142 6.6726664,0.264323834 L6.6726664,2.99884201 C6.6726664,3.76115195 7.33687443,4.38107945 8.15363508,4.38107945 L8.15363508,4.38107945 Z M7.23907461,0.909273991 L10.3463901,3.85243178 L8.15363508,3.85243178 C7.64915416,3.85243178 7.23907461,3.46933844 7.23907461,2.99884201 L7.23907461,0.909273991 L7.23907461,0.909273991 Z M8,13.4713523 L1.5719716,13.4713523 C1.01764676,13.4713523 0.566408217,13.0498439 0.566408217,12.5317692 L0.567163428,1.44144598 C0.584155674,0.929362602 1.02557648,0.528647669 1.5719716,0.528647669 L6.25692277,0.528647669 C6.41325143,0.528647669 6.54012688,0.410230591 6.54012688,0.264323834 C6.54012688,0.118417078 6.41325143,0 6.25692277,0 L1.5719716,0 C0.717450408,0 0.0275651999,0.62591884 0.00113281643,1.43298761 L0,12.5317692 C0,13.341305 0.705367033,14 1.5719716,14 L8,14 L8,13.4713523 Z' id='Fill-73' fill='%235B5B58'/%3E %3Cpath d='M1.73396435,2.77046622 L5.33254456,2.77046622 C5.48849562,2.77046622 5.61537106,2.65204914 5.61537106,2.50614238 C5.61537106,2.36023563 5.48849562,2.24181855 5.33254456,2.24181855 L1.73396435,2.24181855 C1.57801329,2.24181855 1.45076025,2.36023563 1.45076025,2.50614238 C1.45076025,2.65204914 1.57801329,2.77046622 1.73396435,2.77046622 L1.73396435,2.77046622 Z' id='Path' fill='%235B5C59'/%3E %3Cpath d='M1.73396435,4.56927802 L5.33254456,4.56927802 C5.48849562,4.56927802 5.61537106,4.45086094 5.61537106,4.30495418 C5.61537106,4.158695 5.48849562,4.04063035 5.33254456,4.04063035 L1.73396435,4.04063035 C1.57801329,4.04063035 1.45076025,4.158695 1.45076025,4.30495418 C1.45076025,4.45086094 1.57801329,4.56927802 1.73396435,4.56927802 L1.73396435,4.56927802 Z' id='Path' fill='%235B5C59'/%3E %3Cpath d='M1.73396435,5.83979458 C1.57801329,5.83979458 1.45076025,5.95821166 1.45076025,6.10411842 C1.45076025,6.25002517 1.57801329,6.36844225 1.73396435,6.36844225 L9.57116605,6.36844225 C9.72787232,6.36844225 9.85437015,6.25002517 9.85437015,6.10411842 C9.85437015,5.95821166 9.72787232,5.83979458 9.57116605,5.83979458 L1.73396435,5.83979458 Z' id='Path' fill='%235B5C59'/%3E %3Cpath d='M1.73396435,7.63860638 C1.57801329,7.63860638 1.45076025,7.75667103 1.45076025,7.90293022 C1.45076025,8.04883698 1.57801329,8.16725405 1.73396435,8.16725405 L7.57116605,8.16725405 C7.72787232,8.16725405 7.85437015,8.04883698 7.85437015,7.90293022 C7.85437015,7.75667103 7.72787232,7.63860638 7.57116605,7.63860638 L1.73396435,7.63860638 Z' id='Path' fill='%235B5C59'/%3E %3Cpath d='M1.73396435,9.29986572 C1.57801329,9.29986572 1.45076025,9.41793037 1.45076025,9.56418956 C1.45076025,9.71009631 1.57801329,9.82851339 1.73396435,9.82851339 L7.57116605,9.82851339 C7.72787232,9.82851339 7.85437015,9.71009631 7.85437015,9.56418956 C7.85437015,9.41793037 7.72787232,9.29986572 7.57116605,9.29986572 L1.73396435,9.29986572 Z' id='Path' fill='%235B5C59'/%3E %3Cpath d='M9.97928759,5.13194848 C9.83767375,5.13194848 9.72211959,5.25001312 9.72211959,5.39627231 C9.72211959,5.54217907 9.83767375,5.66059614 9.97928759,5.66059614 L11.6475878,5.66059614 C11.7898875,5.66059614 11.9047558,5.54217907 11.9047558,5.39627231 C11.9047558,5.25001312 11.7898875,5.13194848 11.6466468,5.13194848 L9.97928759,5.13194848 Z' id='Path' fill='%235B5C59' transform='translate(10.813438, 5.631948) rotate(-270.000000) translate(-10.813438, -5.631948) '/%3E %3Cpath d='M1.73396435,10.9176636 C1.57801329,10.9176636 1.45076025,11.0357282 1.45076025,11.1819874 C1.45076025,11.3278942 1.57801329,11.4463112 1.73396435,11.4463112 L7.57116605,11.4463112 C7.72787232,11.4463112 7.85437015,11.3278942 7.85437015,11.1819874 C7.85437015,11.0357282 7.72787232,10.9176636 7.57116605,10.9176636 L1.73396435,10.9176636 Z' id='Path' fill='%235B5C59'/%3E %3Cpath d='M12.3781647,9.7569176 L9.73393512,9.7569176 L9.73393512,9.10781388 C9.73393512,8.39274329 10.3275141,7.80139941 11.0560219,7.80139941 C11.7845111,7.80139941 12.3781647,8.39274329 12.3781647,9.10781388 L12.3781647,9.7569176 Z M11.5052622,11.874273 L11.5052622,12.8579635 C11.5052622,12.9706317 11.4089244,13.0658807 11.2937671,13.0658807 L10.8183327,13.0658807 C10.7031754,13.0658807 10.6068376,12.9706317 10.6068376,12.8579635 L10.6068376,11.874273 C10.4951903,11.7666131 10.430125,11.6178083 10.430125,11.4532293 C10.430125,11.1412896 10.6764211,10.8731815 10.9896496,10.8608253 C11.0228264,10.8594727 11.0892734,10.8594727 11.1224502,10.8608253 C11.4356973,10.8731815 11.6819748,11.1412896 11.6819748,11.4532293 C11.6819748,11.6178083 11.6169281,11.7666131 11.5052622,11.874273 L11.5052622,11.874273 Z M13.4535259,9.7569176 L13.3118198,9.7569176 L13.3118198,9.10781388 C13.3118198,7.90735949 12.3387147,6.90447669 11.1224502,6.88305437 C11.0892734,6.88248774 11.0228264,6.88248774 10.9896496,6.88305437 C9.77332906,6.90447669 8.80028005,7.90735949 8.80028005,9.10781388 L8.80028005,9.7569176 L8.65857389,9.7569176 C8.44030158,9.7569176 8.26220737,9.97746518 8.26220737,10.2498504 L8.26220737,13.505349 C8.26220737,13.7774052 8.44030158,14 8.65857389,14 L13.4535259,14 C13.6717982,14 13.8498924,13.7774052 13.8498924,13.505349 L13.8498924,10.2498504 C13.8498924,9.97746518 13.6717982,9.7569176 13.4535259,9.7569176 L13.4535259,9.7569176 Z' id='Fill-1' fill='%235B5C59'/%3E %3C/g%3E %3C/g%3E %3C/g%3E %3C/svg%3E");
}

我想将其转换为base64。

上面的代码是使用带有 postcss-cli 和 postcss-inline-svg 插件的 postcss 使用 npm 脚本创建的，如下所示：

"postcss-inline-svg": "postcss --map file -u postcss-inline-svg --postcss-inline-svg.path src/assets/svg -r dist/assets/css/global.css"

现在作为最后一步，我想将其转换为 base64，为此我使用postcss-base64插件：

"postcss-base64": "postcss --map file -u postcss-base64 --postcss-base64.pattern /%3Csvg.*svg%3E/i -r dist/assets/css/global.css"

然而，运行

npm run postcss-base64

对 CSS 没有任何作用。我试图在 css 中删除这部分：

data:image/svg+xml;charset=utf-8,%3C?xml version='1.0' encoding='UTF-8'?%3E

然后使用 option.prepend 添加：

'data:image/svg+xml;base64,'

但这没有用。

我究竟做错了什么？

天呐！

4

1 回答 1

0

如果有人仍在寻找解决方案，github上的用户 sigorilla 发布了一个选项：

require('postcss-inline-svg')({
    encode: (svg) => Buffer.from(svg).toString('base64'),
    transform: (encoded) => `"data:image/svg+xml;base64,${encoded}"`
})

于 2019-09-25T13:13:26.397 回答