actum / gulp-dev-stack

Actum dev stack based on gulp
MIT License
11 stars 7 forks source link

Use modifier class on SVG element itself, not on USE element #176

Closed zmrhaljiri closed 7 years ago

zmrhaljiri commented 7 years ago

As @ronaldruzicka mentioned in #101 about SVG nunjucks macro, his concern was the <use> element has class used for styling, but it's wrapped by <svg> element that needs to by styled also (for example some dimensions etc.)

With this approach only one class is present to handle all the styling - on <svg> element.

janpanschab commented 7 years ago

@zmrhaljiri @ronaldruzicka The original Idea was to have a base class .icon for general styles like display property or resolution and modifier class for minor changes like different colors.

zmrhaljiri commented 7 years ago

@janpanschab I think now it's done exactly this way. (<svg class="icon {{modifier}}">)

However I can imagine situations when you would need to use a modifier class to control the display property, e.g. if you have more icons in one component.

ronaldruzicka commented 7 years ago

I talked with @janpanschab and we agreed we can use it like this. Basic styles for general icons are styled with icon class and with modifier for svg we can then style custom sizes or colors.