├── .babelrc ├── .github └── FUNDING.yml ├── .gitignore ├── .prettierrc ├── .travis.yml ├── README.md ├── dist └── index.html ├── package-lock.json ├── package.json ├── src ├── App.js ├── Icons │ ├── facebook.svg │ ├── github.svg │ └── twitter.svg └── index.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-react" 5 | ] 6 | } -------------------------------------------------------------------------------- /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: rwieruch 4 | patreon: # rwieruch 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with a single custom sponsorship URL 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "printWidth": 70 4 | } -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | node_js: 4 | - stable 5 | 6 | install: 7 | - npm install 8 | 9 | script: 10 | - npm test -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # minimal-react-webpack-babel-svg-setup 2 | 3 | [![Build Status](https://travis-ci.org/rwieruch/minimal-react-webpack-babel-svg-setup.svg?branch=master)](https://travis-ci.org/rwieruch/minimal-react-webpack-babel-svg-setup) [![Greenkeeper badge](https://badges.greenkeeper.io/rwieruch/minimal-react-webpack-babel-svg-setup.svg)](https://greenkeeper.io/) 4 | 5 | How to use SVG in React with Webpack. [Read more about it](https://www.robinwieruch.de/react-svg/). Read more about the [React + Webpack + Babel Setup](https://www.robinwieruch.de/minimal-react-webpack-babel-setup/). 6 | 7 | ## Installation 8 | 9 | * `git clone git@github.com:rwieruch/minimal-react-webpack-babel-svg-setup.git` 10 | * cd minimal-react-webpack-babel-svg-setup 11 | * npm install 12 | * npm start 13 | * visit `http://localhost:8080/` 14 | -------------------------------------------------------------------------------- /dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The Minimal React Webpack Babel Setup 5 | 6 | 7 |
8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "minimal-react-webpack-babel-svg-setup", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "webpack serve --config ./webpack.config.js --mode development", 8 | "test": "echo \"No test specified\" && exit 0" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "@babel/core": "^7.12.3", 15 | "@babel/preset-env": "^7.12.1", 16 | "@babel/preset-react": "^7.12.1", 17 | "@svgr/webpack": "^5.4.0", 18 | "babel-loader": "^8.1.0", 19 | "react-hot-loader": "^4.13.0", 20 | "webpack": "^5.3.2", 21 | "webpack-cli": "^4.1.0", 22 | "webpack-dev-server": "^3.11.0" 23 | }, 24 | "dependencies": { 25 | "react": "^17.0.1", 26 | "react-dom": "^17.0.1" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import TwitterIcon from './Icons/Twitter.svg'; 4 | import FacebookIcon from './Icons/Facebook.svg'; 5 | import GithubIcon from './Icons/Github.svg'; 6 | 7 | const App = () => ( 8 |
9 | 23 | Icons taken from Flaticon. 24 |
25 | ); 26 | 27 | export default App; 28 | -------------------------------------------------------------------------------- /src/Icons/facebook.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /src/Icons/github.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /src/Icons/twitter.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | import App from './App.js'; 5 | 6 | ReactDOM.render(, document.getElementById('app')); 7 | 8 | module.hot.accept(); 9 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const webpack = require('webpack'); 3 | 4 | module.exports = { 5 | entry: path.resolve(__dirname, './src/index.js'), 6 | module: { 7 | rules: [ 8 | { 9 | test: /\.(js|jsx)$/, 10 | exclude: /node_modules/, 11 | use: ['babel-loader'], 12 | }, 13 | { 14 | test: /\.svg$/, 15 | use: ['@svgr/webpack'], 16 | }, 17 | ], 18 | }, 19 | resolve: { 20 | extensions: ['*', '.js', '.jsx'], 21 | }, 22 | output: { 23 | path: path.resolve(__dirname, './dist'), 24 | filename: 'bundle.js', 25 | }, 26 | plugins: [new webpack.HotModuleReplacementPlugin()], 27 | devServer: { 28 | contentBase: path.resolve(__dirname, './dist'), 29 | hot: true, 30 | }, 31 | }; 32 | --------------------------------------------------------------------------------