Zerolimitsir React Huge Icons Save Abandoned
Huge Icons Package - React | NextJs
Project README
Huge Icons Package - React | NextJs
Quick access
- Server Iran Document: huge-icon.iran.liara.run
- Server United States Document: huge-icons.zerolimit.ir
- NPM Package: react-huge-icons
- Yarn Package: react-huge-icons
Table Of Content:
- Huge Icon React Package
- Table Of Content:
- About the package
- Installation on All website
- Usage on Html
- Change Size Icon on Html
- Change Color Icon on Html
- Add CSS style with class on React
- Installation on React
- Usage on React
- Change Size Icon on React
- Change Color Icon on React
- Add CSS style with class on React
- Publisher
About the package
We are here to convert the Huge Icons package into a ReactJs package. The document of this package
The figma design
Installation on All website
What should we add in the next updates (Font Package)?
To see the next updates, see the CHANGELOG file
npm i huge-icons
or CDN
<!-- Add this piece of code to the <head> site -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/huge-icons/huge-icons.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
Usage on Html
Example Solid:
<i class="solid huge-archive-add"></i>
Example Outline:
<i class="outline huge-archive-add"></i>
Change Size Icon on Html
<!-- with TailwindCss => text-lg, text-[10px]... -->
<i class="outline huge-archive-add text-lg"></i>
<!-- with Css Inline=> font-size:15px;-->
<i class="outline huge-archive-add" style="font-size:20px;"></i>
.my-icon-class{
font-size: 10rem;
}
<i className="solid huge-archive-add my-icon-class"></i>
Change Color Icon on Html
<!-- with TailwindCss => text-red-100, text-green-700... -->
<i class="outline huge-archive-add text-yellow-700"></i>
<!-- with Css Inline=> color:#0ea5e9; , color:rgb(14, 165, 233);-->
<i class="outline huge-archive-add" style="color:#fdc435;"></i>
.my-icon-class{
color:rgb(14, 165, 233);
}
<i className="solid huge-archive-add my-icon-class"></i>
Add CSS style with class on React
.my-icon-class{
font-size: 10rem;
color: #0ea5e9; /* or rgb(14, 165, 233) */
}
.my-icon-class:hover{
color: #fdc435; /* or rgb(14, 165, 233) */
}
<Archive className="my-icon-class"/>
Installation on React
What should we add in the next updates (React Package)?
To see the next updates, see the CHANGELOG file
npm i react-huge-icons
or
yarn add react-huge-icons
Usage on React
import { Archive } from "react-huge-icons/{the mode package}";
All Icons Mode on React
-
bulk -
outline -
solid
Example on React
import { Archive } from 'react-huge-icons/outline';
function App() {
return (
<div className='App'>
<Archive />
</div>
);
}
export default App;
Change Size Icon on React
// with TailwindCss
<Archive className="w-12 h-12"/>
// with Bootstrap
<Archive className="w-25 h-25"/>
// with Css Inline in React
<Archive style={{fontSize: "10rem"}}/>
Change Color Icon on React
// Color property CSS => color: #0ea5e9;
// with TailwindCss // text-red-100 text-white ...
<Archive className="text-primary"/>
// with Bootstrap // text-warning,text-primary ...
<Archive className="text-success"/>
// with Css Inline in React // #0ea5e9 , rgb(14, 165, 233)
<Archive style={{color: "#0ea5e9"}}/>
Add CSS style with class on React
.my-icon-class{
width: 10rem;
height: 10rem;
color: #0ea5e9; /* or rgb(14, 165, 233) */
}
<Archive className="my-icon-class"/>
Publisher
Open Source Agenda is not affiliated with "Zerolimitsir React Huge Icons" Project. README Source: zerolimitir/huge-icons
Stars
49
Open Issues
2
Last Commit
9 months ago
Open Source Agenda Badge
