Uh oh!
There was an error while loading.Please reload this page.
- Notifications
You must be signed in to change notification settings - Fork8
File icons in the file tree.
uiwjs/file-icons
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
File icons in the file tree usingvscode-material-icon-theme.
Visithttps://uiwjs.github.io/file-icons/ and check out the search feature, which has keywords identifying common icon names and styles. For example, if you search for "swift" we call up every icon that could possibly be used as an arrow. We've also included each icon's class name for easy copy/pasting when you're developing!
They are free to use and licensed underMIT. Use them wherever you see fit, personal or commercial.
npm install @uiw/file-icons --save
You can usehttps://uiwjs.github.io/file-icons/ to easily find the icon you want to use. Once you've copied the desired icon's CSS classname, simply add the icon and icon's classname, such asapple to an HTML element.
Suppose the font name is defined asffont, The default home page isunicode, Will generate:
font-class.htmlindex.htmlsymbol.htmlreactffont.jsonffont.cssffont.eotffont.lessffont.svgffont.symbol.svgffont.ttfffont.woffffont.woff2
Preview demofont-class.html,symbol.html anndindex.html. Automatically generated styleffont.css andffont.less.
<svgclass="icon"aria-hidden="true"> <usexlink:href="node_modules/@uiw/file-icons/fonts/ffont.symbol.svg#ffont-javascript"></use></svg>
<style>.iconfont {font-family:"ffont"!important;font-size:16px;font-style: normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing: grayscale;}</style><spanclass="iconfont"></span>
Support for.less and.css styles references.
<linkrel="stylesheet"type="text/css"href="node_modules/@uiw/file-icons/fonts/ffont.css"><iclass="ffont-javascript"></i>
Icons are used as components.v1.3.0+ support.
import{Android}from'@uiw/file-icons';// Orimport{Android}from'@uiw/file-icons/Alipay';<Androidstyle={{fill:'red'}}/><Androidheight="36"/>
To use SVG images as React components directly, webpack loader support is required.
Install dependencies:
yarn add @svgr/webpack file-loader
Configure webpack loader:
// webpack.config.js{test:/\.svg$/,use:[{loader:require.resolve('@svgr/webpack'),options:{prettier:false,svgo:false,svgoConfig:{plugins:[{removeViewBox:false}],},titleProp:true,ref:true,},},{loader:require.resolve('file-loader'),options:{name:'static/media/[name].[hash].[ext]',},},],issuer:{and:[/\.(ts|tsx|js|jsx|md|mdx)$/],},},
You can then import the SVG as a React component like this:
import{ReactComponentasComLogo}from'@uiw/file-icons/icon/android.svg';<ComLogo/>
Custom Icon Component
Create anIcon component.
importReactfrom'react';importsvgPathsfrom'@uiw/file-icons/fonts/ffont.json';constrenderSvgPaths=(type)=>{constpathStrings=svgPaths[type];if(pathStrings==null){returnnull}returnpathStrings.map((d,i)=><pathkey={i}d={d}fillRule="evenodd"/>)}exportdefaultclassIconextendsReact.PureComponent{render(){const{ type, color}=this.props;if(type==null||typeoftype==="boolean"){returnnull;}return(<svgfill={color}viewBox={`0 0 24 24`}>{this.renderSvgPaths(type)}</svg>);}}
Use theIcon component:
constdemo=()=>{return(<Icontype="android"/>)}
As always, thanks to our amazing contributors!
Made withgithub-action-contributors.
Created Bysvgtofont, Licensed under theMIT License.
About
File icons in the file tree.
Topics
Resources
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Sponsor this project
Uh oh!
There was an error while loading.Please reload this page.
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors4
Uh oh!
There was an error while loading.Please reload this page.