I am trying to import some icons from react-icons package and use it in the ReactNavbar but the icon is not showing up.
Please help me to get the icon show up!!
import React from 'react'
import {ReactNavbar} from "overlay-navbar"
import logo from "../../images/logo.png"
import {FaUserAlt} from "react-icons/fa"
const Header = () => {
return <ReactNavbar
navColor1='white'
navColor2="hsl(219,48%,8%)"
burgerColor="hsl(250,100%,75%)"
burgerColorHover="hsl(250,100%,75%)"
logo={logo}
logoWidth="250px"
logoColorHover="hsl(250,100%,75%)"
nav2justifyContent="space-around"
nav3justifyContent="space-around"
link1Text="Home"
link2Text="About"
link3Text="Projects"
link4Text="Contact"
link1Url="/"
link2Url="/about"
link3Url="/projects"
link4Url="/contact"
link1ColorHover="white"
link1Color="HSL(250,100%,75%)"
link1Size="1.5rem"
link1Padding="3vmax"
profileIcon={true}
profileIconElement={<FaUserAlt/>}
/>
}
export default Header
Related
I have all my icons in icons.ts. Currently they are all put into main.bundle.js during build time.
I have an idea of lazy loading the icons in the file so I change them into dynamic import style. This time, the main.bundle.js is 30kb less than previous size.
However, I do not know how to lazy load them in my page with React.lazy and Suspense because of following errors. I also do not know if this is a good way to handle icons because I could not find similar dynamic import style on icons online.
Static Import
import AppDownloadQrCode from '#static/img/app-download-qr-code.png';
import CameraIcon from '#static/img/camera.svg';
import CaretDown from '#static/img/caret-down.svg';
import CarouselNextIcon from '#static/img/icon-next-carousel.svg';
import CarouselPrevIcon from '#static/img/icon-prev-carousel.svg';
import ChatUserIcon from '#static/img/icon-chat-user.png';
import CloseIcon from '#static/img/icon-close.svg';
import CrossIcon from '#static/img/cross.svg';
export { //actually there are many more icon imports but removed for simplicity
AppDownloadQrCode,
CameraIcon,
CaretDown,
CarouselNextIcon,
CarouselPrevIcon,
ChatUserIcon,
CloseIcon,
CrossIcon,
};
Dynamic Import
const AppDownloadQrCode = ()=>import('#static/img/app-download-qr-code.png')
const CameraIcon = ()=>import('#static/img/camera.svg')
const CameraIcon = ()=>import('#static/img/camera.svg')
const CaretDown =()=>import( '#static/img/caret-down.svg')
const CarouselNextIcon =()=>import( '#static/img/icon-next-carousel.svg')
const CarouselPrevIcon =()=>import( '#static/img/icon-prev-carousel.svg')
const ChatUserIcon =()=>import( '#static/img/icon-chat-user.png')
const CloseIcon =()=>import( '#static/img/icon-close.svg')
const CrossIcon =()=>import( '#static/img/cross.svg')
export {
AppDownloadQrCode,
CameraIcon,
CaretDown,
CarouselNextIcon,
CarouselPrevIcon,
ChatUserIcon,
CloseIcon,
CrossIcon,
};
Following is the error.
I'm trying to use #react-three/drei. I've successfully installed and used #react-three/fiber but when I installed #react-three/drei. I get the following error:
./node_modules/three-stdlib/lights/RectAreaLightUniformsLib.js
Attempted import error: 'DataUtils' is not exported from 'three'.
Getting the error when I use this import for #react-three/drei-
import { Preload, ScrollControls, Scroll, useScroll, Image, useFBO, PerspectiveCamera } from '#react-three/drei'
App.jsx
import * as THREE from 'three'
import { Suspense, useRef, useState } from 'react'
import { Canvas, useFrame, useThree } from '#react-three/fiber'
import { Preload, ScrollControls, Scroll, useScroll, Image, useFBO, PerspectiveCamera } from '#react-three/drei'
import SiteNav from "./components/Nav/Nav"
import MainContainer from "./pages/MainContainer";
function App() {
return (
<div className="App">
<SiteNav />
<MainContainer />
</div>
)
}
export default App;
Any help would be appreciated! Thanks
I think the problem here is react-three/drei uses stand alone three-stdlib npm i three-stdlib should solve the problem.
https://github.com/pmndrs/drei react-drei docs says the following:
A growing collection of useful helpers and abstractions for react-three-fiber.
npm install #react-three/drei 👉 this package is using the stand-alone
three-stdlib instead of three/examples/jsm. 👈
I'm currently converting one of my components to a .tsx file and I've run into some weird errors on the semantic ui components that I am currently using and I can't for the life of my figure out what is going on.
any advice is much appreciated
SemanticUI use named export and import so the import should be
import { Search, Icon } from "semantic-ui-react";
// or
import { Icon } from "semantic-ui-react";
import { Search } from "semantic-ui-react";
instead of
import Search from "semantic-ui-react";
import Icon from "semantic-ui-react";
Heavily using material-ui in my app, is there a way to avoid doing imports in each app component like this?
import Typography from "#material-ui/core/Typography";
import Box from "#material-ui/core/Box";
import Grid from "#material-ui/core/Grid";
import Container from "#material-ui/core/Container";
....
or this:
import {Typography, Box, Grid, Container} from "#material-ui/core";
Is there such thing like this? So that I don't need to import each component?
import * from "#material-ui/core"
Thanks in advance! :D
Yes, there is an import all in JavaScript. You can do it like so:
import * as Mui from '#material-ui/core';
This puts all of the named exports of #material-ui/core into the Mui "namespace". Then, you can easily access any of the components i.e.:
<Mui.Typography>Test</Mui.Typography>
You can read more about import here.
The first option is not much clean from an import statement perspective, especially when you want to import and use a lot of Mui components, but as you use path imports to avoid pulling in unused modules, gets an optimized bundle size automatically.
The second option (import * from "#material-ui/core"), on the other hand, is the most convenient from a development perspective, and also makes you have a clean import statement, but will make your application packages larger than they import each component separately depending on what part of components you are using.
Moreover, there is a large scale application you need to import from different sources of Material-ui:
import {} from '#material-ui/core';
import {} from '#material-ui/icons';
import {} from '#mui/material';
A better optimized approach, is to create a single file in your project where you import each component that you use individually, then export them all under a single namespace:
// src/mui/index.js
export { default as MenuItem } from '#material-ui/core/MenuItem';
export { default as TextField } from '#material-ui/core/TextField';
export { default as Select } from '#material-ui/core/Select';
export { default as ClearIcon} from '#material-ui/icons/Clear';
export { default as FormControl } from '#material-ui/core/FormControl';
export { default as Button } from '#mui/material/Button';
...
Then you can import that file wholesale into each component where you need it:
// ../../MyComponent.js
import {
MenuItem,
TextField,
Select,
ClearIcon,
FormControl
} from 'mui';
Now you have a clean import statement and optimized bundle size as well.
Working with absolute path: I never address components with a relative path (e.i ../../../mui). you can take a look here if you don't know how to use absolute path in React.
Hi you can do this in following way:
create a folder called collections
create a file called index.js under collections folder
write the following code in index.js
export {default as Button} from "#material-ui/core/Button";
export {default as Card} from "#material-ui/core/Card";
export {default as Paper} from "#material-ui/core/Paper";
now import collection like bellow:
import * as collections from './collections';
Your component file will be as:
import React, {Component} from "react";
import * as collections from './collections';
class Box extends Component {
render() {
return (
<div>
<collections.Button>
Test
</collections.Button>
<collections.Card>test</collections.Card>
<collections.Paper>test</collections.Paper>
</div>
);
}
}
export default Box;
Please help me on this issue. First, I am using both materialize-css and materiaul-ui at the same time. First, I created a Navbar that imports materialize-css node_module style files.
import { useContext } from 'react';
import { useRouter } from 'next/router';
import Link from 'next/link';
import _ from 'lodash';
import ActiveLink from '../ActiveLink';
import PagesContext from '../context/PagesContext';
import './Navbar.scss';
const Navbar = () => {
const pagesContext = useContext(PagesContext);
const router = useRouter();
const currentRouteObject = _.find(pagesContext, function(page) {
return page.path === router.pathname;
});
And,
Navbar.scss
#import '~materialize-css/dist/css/materialize.min.css';
And, I have one other component. But, this materialize-css styles are imported in that other component too. And, it breaks my styling for other component. Is there any way of encapsulating this imported styles as like in Angular?
Thanks in advance for your helps.
Best Regards.
You could do
Navbar.scss
.materialize-container {
#import '~materialize-css/dist/css/materialize.min.css';
}