Last active
July 21, 2017 10:47
-
-
Save sourvb/15e2ded246f40aefae0dbe84d1db48cf to your computer and use it in GitHub Desktop.
svg-sprite-loader issue.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { Component } from 'react'; | |
| import SampleIcon from '../assets/images/svgs/sample.svg'; | |
| import SvgIcon from '../presentation/SvgIcon'; | |
| export default class Page extends Component { | |
| render() { | |
| <SvgIcon glyph={SampleIcon} width={'15px'} height={'15px'} /> | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from 'react'; | |
| export default function SvgIcon(props) { | |
| /* Because of React warning message > | |
| "Unknown prop `glyph` on <svg> tag" | |
| */ | |
| const svgProps = Object.assign({}, props); | |
| delete svgProps.glyph; | |
| return ( | |
| <svg {...svgProps}> | |
| <use xlinkHref={props.glyph} /> | |
| </svg> | |
| ); | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var webpack = require('webpack'); | |
| var HtmlWebpackPlugin = require('html-webpack-plugin'); | |
| module.exports = { | |
| //devtool: 'cheap-module-eval-source-map', | |
| devtool: 'source-map', | |
| entry: { | |
| app: [ | |
| 'webpack-dev-server/client?http://localhost:8080', | |
| 'webpack/hot/dev-server', | |
| './src/index.js', | |
| ], | |
| vendor: [ | |
| 'react', | |
| 'react-dom', | |
| ], | |
| }, | |
| output: { | |
| path: __dirname, | |
| pathinfo: true, | |
| filename: 'app.js', | |
| publicPath: '/', | |
| }, | |
| resolve: { | |
| extensions: ['.js', '.jsx', '.svg'], | |
| modules: [ | |
| 'src', | |
| 'node_modules', | |
| ], | |
| }, | |
| devServer: { | |
| stats: 'errors-only', | |
| historyApiFallback: { | |
| index: '/' | |
| } | |
| }, | |
| module: { | |
| loaders: [ | |
| { | |
| test: /\.(scss|css)$/, | |
| loaders: ["style-loader", "css-loader", "sass-loader"] | |
| }, { | |
| test: /\.jsx?$/, | |
| exclude: [/node_modules/, /.+\.config.js/], | |
| loader: 'babel-loader', | |
| query: { | |
| presets: ['es2015', 'react'] | |
| } | |
| }, { | |
| test: /\.(jpe?g|gif|png)$/i, | |
| loader: 'url-loader?limit=10000' | |
| }, { | |
| test: /\.json$/, | |
| loader: 'json-loader' | |
| }, { | |
| test: /\.ttf$/, | |
| loader: "url-loader?limit=10000" | |
| }, { | |
| test: /\.svg?$/, | |
| loader: 'svg-sprite-loader' | |
| } | |
| ], | |
| }, | |
| plugins: [ | |
| // Generates an `index.html` file with the <script> injected. | |
| new HtmlWebpackPlugin({ | |
| inject: true, | |
| template: 'index.html', | |
| }), | |
| new webpack.HotModuleReplacementPlugin(), | |
| new webpack.optimize.CommonsChunkPlugin({ | |
| name: 'vendor', | |
| minChunks: Infinity, | |
| filename: 'vendor.js', | |
| }), | |
| new webpack.DefinePlugin({ | |
| __CLIENT__: JSON.stringify(true), | |
| __DEVELOPMENT__: true, | |
| __DEVTOOLS__: true | |
| }), | |
| ] | |
| }; |
Author
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This gist includes a sample svg I am using, webpack dev config file, my react component SvgIcon.js and a sample page where I am loading the icon.