生成多余的css icon-class

[kallsave]

我想一个页面或者是组件用一个font-family,这样不会污染全局的icon-class
第一个svgtofont执行目录的css:

.w-playback-icon-pause:before { content: "\ea01"; }
.w-playback-icon-start:before { content: "\ea02"; }

第二个svgtofont执行目录的css:

.w-page-icon-pause:before { content: "\ea01"; }
.w-page-icon-start:before { content: "\ea05"; }
.w-page-icon-back-example:before { content: "\ea03"; }
.w-page-icon-option:before { content: "\ea04"; }
.w-page-icon-top:before { content: "\ea06"; }

第二个目录的css的 .w-page-icon-pause:before { content: "\ea01"; } 其实是上一个执行目录的

在生成fonts文件中,我已经用 async/await 语法隔离了执行顺序,保证一个 svgtofont 执行完成下个svgtofont才会执行,事实上,生成的svg文件是正确的
第一个svgtofont执行目录的svg:

<glyph glyph-name="pause">
<glyph glyph-name="start">

第二个svgtofont执行目录的svg:

<glyph glyph-name="back-example">
<glyph glyph-name="option">
 <glyph glyph-name="start">
<glyph glyph-name="top">

所以定位到是svgtofont的问题,不是我写的生成脚本有问题
脚本地址: https://github.com/kallsaver/my-learn/blob/master/vue-anime-learn/build/svgtofont.js
项目地址: https://github.com/kallsaver/my-learn/blob/master/vue-anime-learn

[kallsave]

github的回复把标签吞掉了。。
第一个svgtofont执行目录的svg:
glyph-name="pause"
glyph-name="start"

第二个svgtofont执行目录的svg:
glyph-name="back-example"
glyph-name="option"
glyph-name="start"
glyph-name="top"

[jaywcjlove]

@kallsave 我看了css不会污染 不会污染啊，生成两个目录，用的不同的字体前缀 .svgtofont-

@font-face {font-family: "svgtofont";
  src: url('svgtofont.eot?t=1542855071459'); /* IE9*/
  src: url('svgtofont.eot?t=1542855071459#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url("svgtofont.woff2?t=1542855071459") format("woff2"),
  url("svgtofont.woff?t=1542855071459") format("woff"),
  url('svgtofont.ttf?t=1542855071459') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
  url('svgtofont.svg?t=1542855071459#svgtofont') format('svg'); /* iOS 4.1- */
}

[class^="svgtofont-"], [class*=" svgtofont-"] {
  font-family: 'svgtofont' !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:global {
.svgtofont-git:before { content: "\ea01"; }
.svgtofont-stylelint:before { content: "\ea02"; }
}

[kallsave]

@jaywcjlove 根据文件夹的名称可以做到污染 但是有一丢丢小问题 能解决最好
这个问题是 不同文件夹迭代svgtofont函数时,准确来说是生成css的时候, 下个css会多出上个css的class ，生成的svg文件正常

[kallsave]

@jaywcjlove 根据文件夹的名称可以做到不污染

[jaywcjlove]

生成css的时候, 下个css会多出上个css的class

这个回头有空我研究一下，分文件夹应该没有毛病

@kallsave

[AirttaryuZCF]

生成css的时候, 下个css会多出上个css的class

这个回头有空我研究一下，分文件夹应该没有毛病

@kallsave

#17

[jaywcjlove]

应该修复了的吧 #17 @AirttaryuZCF

[kallsave]

好了 感谢 @jaywcjlove @AirttaryuZCF