Welcome folks today in this blog post we will be using the react-file-icon library to generate and render svg icons of different file types in browser using javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make a new react.js app using the below command as shown below
npx create-react-app sampleapp
cd sampleapp
And after that you need to install the below library using the below command as shown below
npm i react-file-icon
And after that you will see the below directory structure of the react.js app as shown below
Embeding SVG Icons of Different Files
Now we can modify the App.js file and copy paste the following code
App.js
|
1 2 3 4 5 6 7 8 9 |
import { FileIcon, defaultStyles } from "react-file-icon"; export default function App() { return ( <div className="App" style={{ height: "80px", width: "80px" }}> <FileIcon extension="docx" {...defaultStyles.docx} /> </div> ); } |
As you can see we are importing the react-file-icon library at the top and then we are embeding the FileIcon widget and we are passing the extension attribute which is docx for word document files and also we are passing the defaultstyles for the docx files.
Showing List of All SVG Icons
App.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import { FileIcon, defaultStyles } from "react-file-icon"; const styledIcons = Object.keys(defaultStyles); export default function App() { return ( <div className="App"> <div className="icons" style={{display:"flex",flexWrap:"wrap"}}> {styledIcons.map((icon) => ( <div key={icon} className="icon" style={{width:"80px",margin:"5px"}}> <FileIcon extension={icon} {...defaultStyles[icon]} /> </div> ))} </div> </div> ); } |
