I'm trying to use https://github.com/kisenka/svg-sprite-loader this package for using svg icons in my app.
Eventually it worked, but I have to import every icon:
import up from '#/assets/svg/up.svg'
How can I do it once, auto-importing all icons from my svg folder?
Prepare a module like sprites.js with the following (adjust your path to svgs):
require.context('path/to/your/svg/folder', true, /\.svg$/);
And include it in your entry point.
More information about require.context in the official Webpack docs
Related
I've got an Astro project using markdown content collections for blog posts. In these posts I have svg images referenced as so:
This shows the SVG inside of an <img> tag but I want to inline the SVG in these scenarios. This is where the rehype-inline-svg plugin is supposed to help me. But when I add the plugin into my Astro config, I get an error ENOENT: no such file or directory, open '/assets/images/image-1.svg'
I have tried several paths to reference this image, but none work. I figure at the very least, the path should stay the same. I am not sure what else to do to get this to work. My Astro config is as follows:
import { defineConfig } from 'astro/config';
import inlineSVG from '#jsdevtools/rehype-inline-svg';
export default defineConfig({
markdown: {
rehypePlugins: [inlineSVG]
},
});
My original goal was to display Excalidraw SVGs with the font. Fonts need to be embedded if contained within an <img> tag so I am trying this inline approach. I would be happy to know if you have a good automated technique for achieving this too.
In your case, is /assets/images/image-1.svg in your public/ directory? Looking at rehype-inline-svg’s code it looks like it tries to resolve SVG paths relative to the root of the project, so you might need to include public/ in your Markdown somewhat unusually:
I am using material-ui in my react project. I found there are two different ways to use their icons.
One is from this web site: https://material.io/tools/icons/?icon=3d_rotation&style=baseline. You can download the icon on the left panel by click it. Or you can install material-design-icons on your project.
Another way is to import them like:
import SearchIcon from '#material-ui/icons/Search';
import ArrowDownwardIcon from '#material-ui/icons/ArrowDownward';
import Close from '#material-ui/icons/Close'
I wonder are they same? Or what is the different?
If you're using Material-UI, the way I (and they) suggest to use them is with SVGIcons, the #material-ui/icons package. What I typically do is look up icons on that website you posted and pull them in from #material-ui/icons.
For example, on that website you'll see one called alarm_on well you import it from that package like import YourIcon from '#material-ui/icons/AlarmOn'.
And the reason I like to do this and not use Icon Fonts is because when people with bad connections try to load your app, the icon might not even load and they'll see an ugly "alarm_on" in plain text where the icon would be.
Take a look at the usage section here.
I heard that there are two different ways of importing components/modules.
Component way
Library way
Anybody has an idea about these concepts?
Take a look at the root index of material-ui. If you import something from this index, you are loading everything that is exported, which ends up being the entire library in this case. If you are not tree-shaking, your bundle will include everything exported by the library and all of its dependencies (whether you use them or not).
It is best to import from the component index (see Button/index.js), because you keep your consumption of the library to a minimum:
import Button from ‘material-ui/Button’;
This issue comes up a lot with lodash and is covered in the mui docs: Minimizing Bundle Size
I found solution to my question. Below is what I was looking for
Library way of importing
import { Button } from 'react-bootstrap';
import { FlatButton } from 'material-ui';
This is nice and handy but it does not only import Button and FlatButton (and their dependencies), but the whole libraries.
Component way of importing
One way to alleviate this is to try to only import or require what is needed, let's say the component way.
Using the same example:
import Button from 'react-bootstrap/lib/Button';
import FlatButton from 'material-ui/lib/flat-button';
This will only bundle Button, FlatButton and their respective dependencies. But not the whole library. So I would try to get rid of all your library imports and use the component way instead.
If you are not using lot of components then it should reduce considerably the size of your bundled file.
Is it possible to theme jquery-ui via npm?
Or do we still have to go through the download builder?
The jquery-ui package has the default theme included at:
./node_modules/jquery-ui/themes/base/*.css.
If we require('jquery-ui') that won't load any css styling as well, right?
Do we need to require('./jquery-ui/themes/base/all.css')?
Or is there a better way?
Is it possible to theme jquery-ui via npm?
Yes, you can use jquery theme package (link).
npm i jquery-ui-themeroller.
And import it
require('./jquery-ui-themes/themes/dot-luv/theme.css');
dot-luv is the name of theme.
Here is official document, not only theme list also tool for customize theme.
Remember to import jquery css file first require('./jquery-ui/themes/base/all.css')
If we require('jquery-ui') that won't load any css styling as well, right?
Yes, you should import require('./jquery-ui/themes/base/all.css'); to get the style file.
Do we need to require('./jquery-ui/themes/base/all.css')?
It is the simplest way to get all widgets style. But in most case we only need several widget.
That say we want datepicker only, we should import css file by
require('./jquery-ui/themes/base/core.css');
require('./jquery-ui/themes/base/datepicker.css');
And now you can use your own theme in the end.
I'm using Node / React / Webpack with leaflet. I installed leaflet using npm and in my map component I import 'leaflet'; which works fine for the js.
However, the map does not look correct due to the css not working correctly, however images stored in the leaflet/dist/images seem to work fine. In order to get the css to work I have to also import 'leaflet/dist/leaflet.css' but it feels to me like I shouldn't have to and that it should be included with the first import statement?
Yes, you have to have, see this link might be useful:
leaflet-css webpack require
I omitted its CSS in an ionic project but copied a few necessary lines to avoid a broken map UI.