Add SVG icon loader #18
Conversation
|
@zehfernandes This is awesome, thank you! I totally agree this is better approach than icon fonts. But I'll be a bit nitpicky, it seems like your IDE changed code formatting on few places. So I would really appreciate if you change it before we merge it. |
source/js/views/Dashboard/index.jsx
Outdated
| @@ -2,7 +2,9 @@ import React, { Component } from 'react'; | |||
| import { connect } from 'react-redux'; | |||
| import PropTypes from 'prop-types'; | |||
| import { testAction, testAsync } from 'actions/app'; | |||
| import Icon from '../../components/Global/Icon'; | |||
There was a problem hiding this comment.
you can use import Icon from 'components/Global/Icon';, as project is set up to use js folder as one of the context points.
source/js/views/Dashboard/index.jsx
Outdated
| counter, | ||
| } = this.props; | ||
|
|
||
| const { asyncData, asyncError, asyncLoading, counter } = this.props; |
There was a problem hiding this comment.
This is one of the things I think you IDE did automatically, let's keep it multiline, it is easier to track changes on git that way.
source/js/views/Dashboard/index.jsx
Outdated
| return ( | ||
| <div className='Dashboard'> | ||
| <h2>Examples</h2> | ||
| <hr /> | ||
| <div> | ||
| <h3>Synchronous action</h3> | ||
| <p>{ counter }</p> | ||
| <p>{counter}</p> |
There was a problem hiding this comment.
IDE again, add spaces back inside the curly braces. We have setup react/jsx-curly-spacing but it doesn't catch blocks, only jsx attributes.
It is known bug though
jsx-eslint/eslint-plugin-react#857
source/js/views/Dashboard/index.jsx
Outdated
| <p>{asyncData}</p> | ||
| {asyncLoading && <p>Loading...</p>} | ||
| {asyncError && <p>Error: {asyncError}</p>} | ||
| <button disabled={ asyncLoading } onClick={ this.handleAsyncButtonClick }> |
There was a problem hiding this comment.
Formatting - add spaces back to curly braces, keep attributes multiline.
webpack.config.js
Outdated
| 'last 3 version', | ||
| 'ie >= 10', | ||
| ], | ||
| browsers: ['last 3 version', 'ie >= 10'], |
There was a problem hiding this comment.
Let's keep this one, as I don't think it will change soon.
webpack.config.js
Outdated
| new webpack.HotModuleReplacementPlugin(), | ||
| new DashboardPlugin() | ||
| ); | ||
| plugins.push(new webpack.HotModuleReplacementPlugin(), new DashboardPlugin()); |
There was a problem hiding this comment.
Formatting - keep it multiline please
webpack.config.js
Outdated
| 'postcss-loader', | ||
| 'sass-loader?sourceMap', | ||
| ], | ||
| }); |
webpack.config.js
Outdated
| ], | ||
| modules: [path.resolve(__dirname, 'node_modules'), jsSourcePath], |
There was a problem hiding this comment.
Formatting - please revert modules to multiline. I love that extensions are now multiline as well.
|
@Stanko Sorry about the formatting changes. My last commit fixed that. 👍 |
|
@zehfernandes I made that assumption about Prettier and ESLint recently too. Easily done. |
I saw in the features list the item Generating icon font from SVGs
Have many articles about what is the best: "Icon Fonts vs. SVG sprite"
Personally, I prefer SVG and I think is the correct use of it. Symbols nodes with SVG sprite are more versatile, easy to align and very simple to maintain.
So, what this pull request does:
svg-sprite-loaderjust with the SVG files in theiconsfolder<Icon glyph='triangle' />