- 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
We are here to convert the Huge Icons package into a ReactJs package. The document of this 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" />
Example Solid:
<i class="solid huge-archive-add"></i>
Example Outline:
<i class="outline huge-archive-add"></i>
<!-- 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>
<!-- 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>
.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"/>
To see the next updates, see the CHANGELOG file
npm i react-huge-icons
or
yarn add react-huge-icons
import { Archive } from "react-huge-icons/{the mode package}
";
bulk
outline
solid
import { Archive } from 'react-huge-icons/outline';
function App() {
return (
<div className='App'>
<Archive />
</div>
);
}
export default App;
// 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"}}/>
// 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"}}/>
.my-icon-class{
width: 10rem;
height: 10rem;
color: #0ea5e9; /* or rgb(14, 165, 233) */
}
<Archive className="my-icon-class"/>