├── .babelrc ├── .eslintignore ├── .eslintrc.js ├── .github └── workflows │ └── publish.yml ├── .gitignore ├── .npmrc ├── .nvmrc ├── .travis.yml ├── LICENSE.md ├── README.md ├── dist └── index.js ├── package-lock.json ├── package.json ├── src ├── index.js ├── index.js.example ├── setupTests.js └── svg-loader-components │ ├── audio.js │ ├── ball-triangle.js │ ├── bars.js │ ├── circles.js │ ├── grid.js │ ├── hearts.js │ ├── oval.js │ ├── puff.js │ ├── rings.js │ ├── spinning-circles.js │ ├── tail-spin.js │ └── three-dots.js ├── test ├── audio.test.js ├── ball-triangle.test.js ├── bars.test.js ├── circles.test.js ├── grid.test.js ├── hearts.test.js ├── oval.test.js ├── puff.test.js ├── rings.test.js ├── spinning-circles.test.js ├── tail-spin.test.js └── three-dots.test.js └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/preset-react"], 3 | "plugins": [ 4 | "@babel/plugin-proposal-object-rest-spread", 5 | "transform-react-jsx" 6 | ] 7 | } -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | /dist/ 3 | webpack.config.js -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | // ESLint configuration 2 | // http://eslint.org/docs/user-guide/configuring 3 | module.exports = { 4 | parser: 'babel-eslint', 5 | 6 | extends: [ 7 | 'airbnb', 8 | ], 9 | 10 | globals: { 11 | __DEV__: true, 12 | }, 13 | 14 | env: { 15 | node: true, 16 | browser: true, 17 | amd: true, 18 | es6: true, 19 | jest: true 20 | }, 21 | 22 | rules: { 23 | // `js` and `jsx` are common extensions 24 | 'import/extensions': [ 25 | 'error', 26 | 'always', 27 | { 28 | js: 'never', 29 | jsx: 'never', 30 | }, 31 | ], 32 | 33 | 'react/jsx-filename-extension': [ 34 | 1, 35 | { 36 | 'extensions': ['.js', '.jsx'], 37 | }, 38 | ], 39 | 40 | // Not supporting nested package.json yet 41 | // https://github.com/benmosher/eslint-plugin-import/issues/458 42 | 'import/no-extraneous-dependencies': 'off', 43 | 44 | // Recommend not to leave any console.log in your code 45 | // Use console.error, console.warn and console.info instead 46 | 'no-console': [ 47 | 'error', 48 | { 49 | allow: ['warn', 'error', 'info'], 50 | }, 51 | ], 52 | 53 | // Switching off checks for linebreaks 54 | 'linebreak-style': 'off', 55 | 56 | // Switching off default exports 57 | 'import/prefer-default-export': 'off', 58 | 59 | // Switching off prop-types, which is disabled in React 18 and removed in React 19 60 | // See https://react.dev/blog/2024/04/25/react-19-upgrade-guide#removed-proptypes-and-defaultprops 61 | "react/prop-types": "off" 62 | }, 63 | }; 64 | -------------------------------------------------------------------------------- /.github/workflows/publish.yml: -------------------------------------------------------------------------------- 1 | name: Publish Package to npmjs 2 | on: 3 | release: 4 | types: [published] 5 | 6 | jobs: 7 | build: 8 | runs-on: ubuntu-latest 9 | permissions: 10 | contents: read 11 | id-token: write 12 | steps: 13 | - uses: actions/checkout@v4 14 | - uses: actions/setup-node@v4 15 | with: 16 | node-version: '20.x' 17 | registry-url: 'https://registry.npmjs.org' 18 | - run: npm ci 19 | - run: npm test 20 | - run: npm publish --provenance --access public 21 | env: 22 | NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} 23 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | legacy-peer-deps=true 2 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v20 2 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - stable 4 | cache: 5 | directories: 6 | - node_modules 7 | script: 8 | - npm run lint 9 | - npm run test 10 | - npm run build 11 | deploy: 12 | provider: npm 13 | edge: true 14 | email: ajwann@ajwann.com 15 | api_key: 16 | secure: YkxXF6wD7aSq0jR9kxORYNd01dakfOGyCJnXYiZZSAZQCByKIULw3clXaUo6dIWVyOy/uMU4/sAFmov2HIzrJ4yin2AeoLUKhSPaxKa7C/7/rar1m5jgw4B5vskrCdfsdoyalbnZquWjh+hdA8YV6YMyPyrS19coXdFRFiabIPyAzljiuv+Iquips7HJQuA12FbTsrVyLYloOkUvBLMUv+0JtJxDBJPFRq9RYwt+9jrdh2YADjf2gcpUHyaw7p8gIkNRAsNyWtFi6uPJ5fOP4XWGDoKh7IUMxdP+siN3jsqYR2nPkfFpaO1S4X/4r9R3VpHln4G79B5R/l1k47ZiroHuLQMoC9azUHc+qoLnbBYcCJl9te6JItrfDB4JXqOyNuF3AF6NLhXNeywbuoxcc+ypXGOVkSgTXWbtfsVzuvAN+b5a0Hj6Fkzu5hyYkJ8a4gL/4WxsPK7GoCwzw9CbdXvQR9K3kQpeRFv1vRrdGhKjLbbU+DDZUhojxGIP8CYAJESA/fpKJ7+PiQUQj/tIfu+Hx1mAn5iZIFwKDYuEpMLPGOxIdxj4Nilb8fujCJOSrVqzpo75gpah5yjtE/1T9aRvJN8LuulbaZmJcyxtMoqGwl6KrDGhnXWzsFabZkSQypxuM1+zfJBXyyU0TAh7mx+NpF6EaWz5dXNKgjwbVYs= 17 | on: 18 | tags: true 19 | repo: ajwann/svg-loaders-react 20 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | **Original Work** Copyright (c) 2014 Sam Herbert 4 | 5 | **Modified Work Copyright (c) 2018 Adam Wanninger** 6 | 7 | Permission is hereby granted, free of charge, to any person obtaining a copy 8 | of this software and associated documentation files (the "Software"), to deal 9 | in the Software without restriction, including without limitation the rights 10 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 11 | copies of the Software, and to permit persons to whom the Software is 12 | furnished to do so, subject to the following conditions: 13 | 14 | The above copyright notice and this permission notice shall be included in all 15 | copies or substantial portions of the Software. 16 | 17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 18 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 19 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 20 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 21 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 22 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 23 | SOFTWARE. 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![npm version](https://badge.fury.io/js/svg-loaders-react.svg)](https://badge.fury.io/js/svg-loaders-react) 2 | 3 | This is a zero-dependency React adaptation of Sam Herberts [SVG Loaders](https://github.com/SamHerbert/SVG-Loaders) library. 4 | 5 | # Usage 6 | 7 | ## Install from NPM 8 | ```bash 9 | npm install svg-loaders-react 10 | ``` 11 | 12 | ## Import the SVGLoaders components 13 | 14 | ### Import all the loaders in a namespaced fashion 15 | You can import all the loaders at once: 16 | ```js 17 | import * as SVGLoaders from 'svg-loaders-react'; 18 | ``` 19 | and use them in a namespaced manner: 20 | ```js 21 | 22 | ``` 23 | 24 | ### Import an individual loader 25 | You can also import a single loader: 26 | ```js 27 | import { Bars } from 'svg-loaders-react' 28 | ``` 29 | and use it without any fancy namespacing: 30 | ```js 31 | 32 | ``` 33 | 34 | ## Components 35 | 36 | ```