file icons

Datei -Symbol Schriftart

Datei-Symbole in der Dateistruktur mit VSCODE-MATERIAL-ICON-THEME.

Besuchen Sie https://uiwjs.github.io/file-icons/ und besuchen Sie die Suchfunktion, bei der Schlüsselwörter identifiziert werden. Wenn Sie beispielsweise nach "Swift" suchen, rufen wir jedes Symbol an, das möglicherweise als Pfeil verwendet werden könnte. Wir haben auch den Klassennamen jedes Symbols für das einfache Kopieren/Einfügen bei der Entwicklung aufgenommen!

Sie sind frei zu verwenden und unter MIT zu lizenzieren. Verwenden Sie sie überall dort, wo Sie es für richtig, persönlich oder kommerziell halten.

Installieren

npm install @uiw/file-icons --save

Verwendung

Sie können https://uiwjs.github.io/file-icons/ verwenden, um das Symbol, das Sie verwenden möchten, leicht zu finden. Sobald Sie den CSS -Klassennamen des gewünschten Symbols kopiert haben, fügen Sie einfach den Klassennamen des Symbols und des Symbols wie apple einem HTML -Element hinzu.

Angenommen, der Schriftname ist als ffont definiert. Die Standard -Startseite ist unicode , generiert:

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

Vorschau Demo font-class.html , symbol.html annd index.html . Automatisch generierte stile ffont.css und ffont.less .

Symbol 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 >

Klassenname

Unterstützung für .less und .css -Stilreferenzen.

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

Verwendet in React

Symbole werden als Komponenten verwendet. v1.3.0+ Unterstützung.

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

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

Um SVG -Bilder als React -Komponenten direkt zu verwenden, ist die Unterstützung von WebPack Loader erforderlich.

Abhängigkeiten installieren:

yarn add @svgr/webpack file-loader

Webpack Loader konfigurieren:

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

Sie können dann die SVG als React -Komponente wie folgt importieren:

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

< ComLogo />

Benutzerdefinierte Symbolkomponente

Erstellen Sie eine 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 >
    ) ;
  }
}

Verwenden Sie die Icon :

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

Mitwirkende

Wie immer dank unserer erstaunlichen Mitwirkenden!

Hergestellt mit Github-Action-Contributors.

Lizenz

Erstellt von SVGTofont, lizenziert unter der MIT -Lizenz.