file icons

Police d'icône de fichier

Icônes de fichier dans l'arborescence de fichiers à l'aide de vscode-material-icon-thème.

Visitez https://uiwjs.github.io/file-icons/ et consultez la fonction de recherche, qui a des mots clés identifiant les noms et styles d'icônes communes. Par exemple, si vous recherchez "Swift", nous appelons toutes les icônes qui pourraient éventuellement être utilisées comme flèche. Nous avons également inclus le nom de la classe de chaque icône pour une copie / coller facile lorsque vous développez!

Ils sont libres à utiliser et sous licence dans le MIT. Utilisez-les partout où vous le voyez, personnelle ou commerciale.

Installer

npm install @uiw/file-icons --save

Usage

Vous pouvez utiliser https://uiwjs.github.io/file-icons/ pour trouver facilement l'icône que vous souhaitez utiliser. Une fois que vous avez copié le nom de classe CSS de l'icône souhaitée, ajoutez simplement l'icône et le nom de classe de l'icône, comme apple à un élément HTML.

Supposons que le nom de la police soit défini comme ffont , la page d'accueil par défaut est unicode , générera:

font-class.html
index.html
symbol.html
react
ffont.json
ffont.css
ffont.eot
ffont.less
ffont.svg
ffont.symbol.svg
ffont.ttf
ffont.woff
ffont.woff2

Aperçu de la démonstration font-class.html , symbol.html annd index.html . Style généré automatiquement ffont.css et ffont.less .

Symbole SVG

< svg class = " icon " aria-hidden = " true " >
  < use xlink : href = " node_modules/@uiw/file-icons/fonts/ffont.symbol.svg#ffont-javascript " ></ use >
</ svg >

Unicode

 < 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 >
< span class =" iconfont " > &#59907; </ span >

Nom de classe

Prise en .less des références .css Styles.

 < link rel =" stylesheet " type =" text/css " href =" node_modules/@uiw/file-icons/fonts/ffont.css " >
< i class =" ffont-javascript " > </ i > 

Utilisé dans React

Les icônes sont utilisées comme composants. v1.3.0+ support.

 import { Android } from '@uiw/file-icons' ;
// Or
import { Android } from '@uiw/file-icons/Alipay' ;

< Android style = { { fill : 'red' } } />
< Android height = "36" / >

Pour utiliser directement les images SVG comme composants React, la prise en charge du chargeur WebPack est requise.

Installez les dépendances:

yarn add @svgr/webpack file-loader

Configurer le chargeur WebPack:

 // 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)$ / ] ,
  } ,
} ,

Vous pouvez ensuite importer le SVG en tant que composant React comme celui-ci:

 import { ReactComponent as ComLogo } from '@uiw/file-icons/icon/android.svg' ;

< ComLogo />

Composant d'icône personnalisé

Créez un composant Icon .

 import React from 'react' ;
import svgPaths from '@uiw/file-icons/fonts/ffont.json' ;

const renderSvgPaths = ( type ) => {
  const pathStrings = svgPaths [ type ] ;
  if ( pathStrings == null ) {
    return null
  }
  return pathStrings . map ( ( d , i ) => < path key = { i } d = { d } fillRule = "evenodd" /> )
}

export default class Icon extends React . PureComponent {
  render ( ) {
    const { type , color } = this . props ;
    if ( type == null || typeof type === "boolean" ) {
      return null ;
    }
    return (
      < svg fill = { color } viewBox = { `0 0 24 24` } > { this . renderSvgPaths ( type ) } </ svg >
    ) ;
  }
}

Utilisez le composant Icon :

 const demo = ( ) => {
  return (
    < Icon type = "android" />
  )
} 

Contributeurs

Comme toujours, grâce à nos incroyables contributeurs!

Fabriqué avec des contributeurs github-action.

Licence

Créé par SVGTofont, sous licence sous la licence MIT.