Please add option to disable all css props except font-family/content

[ruslansavenok]

Would be nice to do something like this:

.jm-icon {
  $icons: (
    'email',
    'star',
    'star-filled',
    'chevron-left'
  );

  text-rendering: auto;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  font-weight: normal;
  line-height: 1;
  
  &:before {
    display: block;
  }

  @each $icon in $icons {
    &--#{$icon}:before {
      font-icon: url('../static/images/v2/single-color/#{$icon}.svg');
    }
  }
}

So :before {} blocks would have only following code

.jm-icon--star:before {
  font-family: z90da5;
  font-weight: normal;
}

[jantimon]

Hmm how could an api look like?

[em]

@jantimon Just don't add styles declarations that aren't necessary.

This is the output I see:

i.icon.filter:before {
  text-rendering: auto;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  font-family: u27d1d;
  font-weight: normal;
  content: '\E001';
}
i.icon.download:before {
  text-rendering: auto;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  font-family: u27d1d;
  font-weight: normal;
  content: '\E002';
}

Please don't put -webkit-font-smoothing: auto in by default... It makes my icons look like crap, and I have to manually override it with an !important statement. If you want it, then anyone using your plugin can apply it themselves in their own CSS.

The only properties I want generated by this library is font-family and content.

I also always have to ensure I override the font-weight you put in there with higher specificity.

[danielkoch]

It would be very nice to have more control about the generated styles.
Assume you want to build some additional styles variants ("Rotated & Flipped") like http://fontawesome.io/examples/. You need to have separate styles for "generic" stuff like:

  text-rendering: auto;
  font-family: u27d1d;
  font-weight: normal;

and the individual icon styles, like:

content: '\E002';

[jantimon]

@em Please don't use !important as it causes huge maintenance.

A possible solution could be:

.accordion__title:before {
  font-icon: url('plus.svg');
  -webkit-font-smoothing: antialiased;
}

However you are right auto is not a good default.
Therefore I am preparing a change to adopt to the styles from FontAwesome: https://github.com/FortAwesome/Font-Awesome/blob/31281606f5205b0191c17c3b4d2d56e1ddbb2dc6/web-fonts-with-css/css/fontawesome-all.css#L10-L15

@danielkoch @ruslansavenok
The idea of this library is not to be a replacement for font awesome but to make use of the powerful features webpack provides.
The main advantages of this plugin are:

1. You can switch from svg to font-icon and back in no time.
   Just replace background: url('my-icon.svg'); to font-icon: url('my-icon.svg'); or the other way around depending on your requirements

2. The Dependency tree - one of the best features of webpack is the dependency tree. I got the impression that people without CS background don't like that idea because it forces you to be very explicit. The huge advantage is that the computer can make sense of the files you are gathering in your asset folder. Instead of having an iconfont out of 40 (and growing) icons you would have an accordion directly depending on one svg. Refactoring/Removing the accordion would automatically remove the icon out of your font.

3. You can copy your accordion component over into another project and it will just work - without having to worry about wether all icons are present or not

4. Colocation (for details read this amazing post by Kent C. Dodds about maintainability and scaling @kentcdodds) allows you to place your plus.svg very close to your accordion element. It's very easy to tell the designer in your project how to change that icon and to understand the impact of changing a svg file inside a accordion component.

Would love to get some feedback and please let me know if #12 would help you solving your issue.

[danielkoch]

@jantimon
Yes, thanks for your arguments. Font awesome was just an example on how to provide an fixed "icon set" as an additional way of using your plugin. You are right If. If you do so you need to be careful maintaining your icons.

[sergeymorkovkin]

Everything except content property can be declared separately. Should not duplicate.

[sergeymorkovkin]

Request is being ignored for many month's in a row, while the plugin is best of it's kind. For now doing this on NPM "install":

sed -i .bak -e '87,118 d' ./node_modules/iconfont-webpack-plugin/lib/postcss-plugin.js

Alternatively you could do this:

sed -i .bak -e '/decl\.cloneBefore/,/});/ d' ./node_modules/iconfont-webpack-plugin/lib/postcss-plugin.js
sed -i .bak -e '/if (!*fontIcon\.size) {/,/}/ d' ./node_modules/iconfont-webpack-plugin/lib/postcss-plugin.js
sed -E -i .bak -e '/(font size is|font name)/ d' ./node_modules/iconfont-webpack-plugin/lib/postcss-plugin.js