I am working on a react and Webpack 3 application.
I have a set of SVG icons and want to convert these icons into images and put it into images folder so that I can access these images and use it in my react component(eg. <img src='icon.png' />).
Currently, I am exporting SVG as components in js and importing it in JSX.
Should I use webpack loaders for this? if yes, which loader I should use?
or any other ways?
You can use SVG to PNG loader.
Related
How can I preload my fonts using Tailwind CSS? Perhaps in the tailwind.config.js file?
I'd like to preload fonts before UI rendering.
is there a way to disable tailwindcss styles from being applied to certain react components? I am trying to use react-markdown which will convert a markdown file into JSX. However, since tailwindcss will disable the default styling of header tags (eg. the <h1> tag), the markdown does not display properly.
Is it possible to disable tailwind for the specific file that uses react-markdown to render the markdown file? Or is there another way to display markdown files in React using tailwind.
Any help is appreciated!
There is also a typography plugin for tailwind. You could check it out too.
Here is a link for setting up the typography plugin and applying it to only parts of a react app.
I'm using file loader and can load pngs just fine. I'm doing import myImage from "../../path/image.svg" and then <img src={myImage}/>. When I use the developer tools and click on the SVG I'm trying to include, I get a page with a message like:
"Error on line 1 at column 1: Document is empty
Below is a rendering of the page up to the first error."
Has anyone seen this error before and if so what can be done about it?
If you look at the file loader docs there is no mention of being able to load svg files.
You need to use a specialised loader. Here are webpack docs for one svg loader but there are plenty of others.
I found out about #svgr/webpack, with it you can import the SVGs like modules and then use them as components.
I am using nextjs for a site and have my css in
Styles components. I want to import modernizr and use this to detect browser features and change the css in my styles components accordingly. I can see I could just use a script tag in the html file but wanted to see if any way modernizr can be used as import. What’s the best way to use modernizr in react?
I'm using react loadable to code split off components. I'm also using Extract CSS Chunks to split my stylesheets up. Everything works great during server side rendering and the initial client side render, but when I transition to a new page and a component is dynamically imported, the JS is being fetched, but the corresponding CSS for the component is not.
This wasn't an issue when all my CSS was in one file, but now that it's not, how am I to fetch the CSS along with the JS for dynamically imported components? Is that what Webpack Flush Chunks is supposed to help with?
Thanks in advance!
I solved this issue by upgrading to webpack 4 and using the mini-css-extract-plugin