An SVG loader component for ReactJS

react-inlinesvg

Load inline, local or remote SVGs in your React components.

Highlights

• 🏖 Easy to use: Just set the src
• 🛠 Flexible: Personalize the options to fit your needs
• ⚡️ Smart: Async requests will be cached.
• 🚀 SSR: Render a loader until the DOM is available
• 🟦 Typescript: Nicely typed

Usage

npm i react-inlinesvg

And import it into your code:

import React from 'react';
import SVG from 'react-inlinesvg';

const Icon = () => <SVG src={require('/path/to/myfile.svg')} />;

Props

src {string} - required.
The SVG file you want to load. It can be a require, URL or a string (base64 or url encoded). If you are using create-react-app and your file resides in the public directory you can use the path directly without require.

baseURL {string}
An URL to prefix each ID in case you are using the <base> tag and uniquifyIDs.

children {ReactNode}
The fallback content in case of a fetch error or unsupported browser.

<SVG src="...">
	<img src="..." alt="fallback" />
</SVG>

cacheRequests {boolean} ▶︎ true
Cache remote SVGs.

description {string}
A description for your SVG. It will override an existing <desc> tag.

innerRef {React.Ref|function}
Get the SVG HTMLElement.

loader {node}
A component to be shown while the SVG is loading.
If you set

onError {function}
A callback to be invoked if loading the SVG fails.
This will receive a single argument with:

• a FetchError with:

{
  message: string;
  type: string;
  errno: string;
  code: string;
}

• or an InlineSVGError, which has the following properties:

{
    name: 'InlineSVGError',
    data?: object,
    message: string
}

onLoad {function}.
A callback to be invoked upon successful load.
This will receive 2 arguments: the src prop and a hasCache boolean

preProcessor {function} ▶︎ string
A function to process the contents of the SVG text before parsing.

title {string}
A title for your SVG. It will override an existing <title> tag.

uniqueHash {string} ▶︎ a random 8 characters string [A-Za-z0-9]
A string to use with uniquifyIDs.

uniquifyIDs {boolean} ▶︎ false
Create unique IDs for each icon.

Additional props will be spread over the SVG element.

Example

<SVG
  baseURL="/home"
  cacheRequests={true}
  description="The React logo"
  loader={<span>Loading...</span>}
  onError={error => console.log(error.message)}
  onLoad={(src, hasCache) => console.log(src, hasCache)}
  preProcessor={code => code.replace(/fill=".*?"/g, 'fill="currentColor"')}
  src="https://cdn.svgporn.com/logos/react.svg"
  title="React"
  uniqueHash="a1f8d1"
  uniquifyIDs={true}
/>

Browser Support

Any browsers that support inlining SVGs and fetch will work.

If you need to support legacy browsers you’ll need to include a polyfiil for fetch and Number.isNaN in your app. Take a look at react-app-polyfill or polyfill.io.

CORS

If you are loading remote SVGs, you’ll need to make sure it has CORS support.

Why you need this package?

One of the reasons SVGs are awesome is because you can style them with CSS. Unfortunately, this winds up not being too useful in practice because the style element has to be in the same document. This leaves you with three bad options:

1. Embed the CSS in the SVG document
   • Can’t use your CSS preprocessors (LESS, SASS)
   • Can’t target parent elements (button hover, etc.)
   • Makes maintenance difficult
2. Link to a CSS file in your SVG document
   • Sharing styles with your HTML means duplicating paths across your project, making maintenance a pain
   • Not sharing styles with your HTML means extra HTTP requests (and likely duplicating paths between different SVGs)
   • Still can’t target parent elements
   • Your SVG becomes coupled to your external stylesheet, complicating reuse.
3. Embed the SVG in your HTML
   • Bloats your HTML
   • SVGs can’t be cached by browsers between pages.
   • A maintenance nightmare

But there’s an alternative that sidesteps these issues: load the SVG with a GET request and then embed it in the document. This is what this component does.

Note

The SVG [<use>][svg-use-external-source] element can be used to achieve something similar to this component. See [this article][use-article] for more information and [this table][use-support] for browser support and caveats.

Credits

Thanks to @matthewwithanm for creating this component and so kindly transfer it to me. I’ll definitely keep the good work! ❤️

Download Details:

Author: gilbarbara

Demo: https://codesandbox.io/s/j25bv

Source Code: https://github.com/gilbarbara/react-inlinesvg

#reactjs #react #javascript

What is GEEK

Buddha Community

ReactJS Development Company USA | ReactJS Web Development Company

ByteCipher is one of the leading React JS app development Companies. We offer innovative, efficient and high performing app solutions. As a ReactJS web development company, ByteCipher is providing services for customized web app development, front end app development services, astonishing react to JS UI/UX development and designing solutions, reactJS app support and maintenance services, etc.

#reactjs development company usa #reactjs web development company #reactjs development company in india #reactjs development company india #reactjs development india

Top React JS App Development Company in USA | React JS Services

Hire ReactJS app developers for end-to-end services starting from development to customization with AppClues Infotech.

Are you looking for the best company in USA that provides high-quality ReactJS app development services? Having expertise in building robust and real-time mobile apps using React Native Library.

We can fully support your specific business idea with outstanding tech skills and deliver a perfect mobile app on time.

Our ReactJS App Development Services
• Custom ReactJS Development
• ReactJS Consulting
• React UX/UI development and design
• App modernization using React
• React Native mobile development
• Dedicated React development team
• Application migration to React

For more info:
Website: https://www.appcluesinfotech.com/
Email: info@appcluesinfotech.com
Call: +1-978-309-9910

#top reactjs app development company in usa #hire best reactjs app developers #best reactjs app development services #custom reactjs app development agency #how to develop reactjs app #cost to build reactjs application

Why ReactJS is better for Web Application Development?

Web Application Development is essential for a business in today’s digital era. Finding the right platform for Web Application Development is important for building an effective Web Application that can enhance the overall customer engagement. Here’s what makes ReactJS a better option for building your next Web Application.

#Why ReactJS is better for Web Application Development #Benefits of ReactJS #What is ReactJS? #ReactJS vs AngularJS

Epic Games Store ReactJS UI -NextJS, MaterialUI, ReactJS, TypeScript -Login Form Design #5

Hi, in this series we will try to build fullstack application with NestJS, NextJS, ReactJS, PostgreSQL and TypeScript. My aim is to build something bigger and more interesting. Features like authorization or using database are always tricky so I think it’s good to implement on your own to understand how they work. We will build both API and web application. Our app is a funny little approach to mimic something like a game library and we will try to recreate Epic Games Store.

Have you ever wondered how are real app design and written? In this series I will try to reproduce at least some functionalities of Epic Games Store. In the fifth episode I am recreating the login form. We’ll use NextJS, MaterialUI, ReactJS and TypeScript.

You can find me here:

https://twitter.com/wojciech_bilick
https://medium.com/@wojciech.bilicki
https://github.com/wojciech-bilicki

---

ignore

nextjs
materialui
reactjs
typescript
web design
html
web development
css
html5
css3
es6
programming
basics
tutorial
javascript
how to make a website
responsive design tutorial
web development tutorial
media queries
website from scratch
html css
responsive website tutorial
responsive web development
web developer
how to make a responsive website
how to build a website from scratch
how to build a website
build a website
How to

#reactjs ui #reactjs #materialui #nextjs #typescript #reactjs

An SVG loader component for ReactJS

react-inlinesvg

Load inline, local or remote SVGs in your React components.

Highlights

• 🏖 Easy to use: Just set the src
• 🛠 Flexible: Personalize the options to fit your needs
• ⚡️ Smart: Async requests will be cached.
• 🚀 SSR: Render a loader until the DOM is available
• 🟦 Typescript: Nicely typed

Usage

npm i react-inlinesvg

And import it into your code:

import React from 'react';
import SVG from 'react-inlinesvg';

const Icon = () => <SVG src={require('/path/to/myfile.svg')} />;

Props

src {string} - required.
The SVG file you want to load. It can be a require, URL or a string (base64 or url encoded). If you are using create-react-app and your file resides in the public directory you can use the path directly without require.

baseURL {string}
An URL to prefix each ID in case you are using the <base> tag and uniquifyIDs.

children {ReactNode}
The fallback content in case of a fetch error or unsupported browser.

<SVG src="...">
	<img src="..." alt="fallback" />
</SVG>

cacheRequests {boolean} ▶︎ true
Cache remote SVGs.

description {string}
A description for your SVG. It will override an existing <desc> tag.

innerRef {React.Ref|function}
Get the SVG HTMLElement.

loader {node}
A component to be shown while the SVG is loading.
If you set

onError {function}
A callback to be invoked if loading the SVG fails.
This will receive a single argument with:

• a FetchError with:

{
  message: string;
  type: string;
  errno: string;
  code: string;
}

• or an InlineSVGError, which has the following properties:

{
    name: 'InlineSVGError',
    data?: object,
    message: string
}

onLoad {function}.
A callback to be invoked upon successful load.
This will receive 2 arguments: the src prop and a hasCache boolean

preProcessor {function} ▶︎ string
A function to process the contents of the SVG text before parsing.

title {string}
A title for your SVG. It will override an existing <title> tag.

uniqueHash {string} ▶︎ a random 8 characters string [A-Za-z0-9]
A string to use with uniquifyIDs.

uniquifyIDs {boolean} ▶︎ false
Create unique IDs for each icon.

Additional props will be spread over the SVG element.

Example

<SVG
  baseURL="/home"
  cacheRequests={true}
  description="The React logo"
  loader={<span>Loading...</span>}
  onError={error => console.log(error.message)}
  onLoad={(src, hasCache) => console.log(src, hasCache)}
  preProcessor={code => code.replace(/fill=".*?"/g, 'fill="currentColor"')}
  src="https://cdn.svgporn.com/logos/react.svg"
  title="React"
  uniqueHash="a1f8d1"
  uniquifyIDs={true}
/>

Browser Support

Any browsers that support inlining SVGs and fetch will work.

If you need to support legacy browsers you’ll need to include a polyfiil for fetch and Number.isNaN in your app. Take a look at react-app-polyfill or polyfill.io.

CORS

If you are loading remote SVGs, you’ll need to make sure it has CORS support.

Why you need this package?

One of the reasons SVGs are awesome is because you can style them with CSS. Unfortunately, this winds up not being too useful in practice because the style element has to be in the same document. This leaves you with three bad options:

1. Embed the CSS in the SVG document
   • Can’t use your CSS preprocessors (LESS, SASS)
   • Can’t target parent elements (button hover, etc.)
   • Makes maintenance difficult
2. Link to a CSS file in your SVG document
   • Sharing styles with your HTML means duplicating paths across your project, making maintenance a pain
   • Not sharing styles with your HTML means extra HTTP requests (and likely duplicating paths between different SVGs)
   • Still can’t target parent elements
   • Your SVG becomes coupled to your external stylesheet, complicating reuse.
3. Embed the SVG in your HTML
   • Bloats your HTML
   • SVGs can’t be cached by browsers between pages.
   • A maintenance nightmare

But there’s an alternative that sidesteps these issues: load the SVG with a GET request and then embed it in the document. This is what this component does.

Note

The SVG [<use>][svg-use-external-source] element can be used to achieve something similar to this component. See [this article][use-article] for more information and [this table][use-support] for browser support and caveats.

Credits

Thanks to @matthewwithanm for creating this component and so kindly transfer it to me. I’ll definitely keep the good work! ❤️

Download Details:

Author: gilbarbara

Demo: https://codesandbox.io/s/j25bv

Source Code: https://github.com/gilbarbara/react-inlinesvg

#reactjs #react #javascript