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.
Related
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
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.
Screen capture of Material styled screen
I need help configuring Material with my Swift project.
As you can see I am able import Material into my project, however the buttons (except for the switchControl) are not appearing. The assets can be seen in the project's Media Library.
I don't know how to test my integration. I'm looking at the MaterialIcon.swift file because I don't think that the path to resources is correct.
I've compared my build to the examples provided by CM and I need help.
Thanks.
If you are using CocoaPods to setup your project, which I think you are based on your issue. You have two options:
Clean the build folder and delete the UserDerived directory, as well, ensure you are using 1.0* of CocoaPods.
Copy the Assets catalog into your application.
All the best :)
Make sure that you are giving the elements a size also.
Let Button = FabButton()
Button.setButtonTitle(title: "Button", forState: .Noarmal)
view.addSubview(Button)
View.Layout(Button).top(0).left(0).width(80).height(80)
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.