file icons

Font Ikon File

Ikon file di pohon file menggunakan vscode-material-icon-teme.

Kunjungi https://uiwjs.github.io/file-icons/ dan lihat fitur pencarian, yang memiliki kata kunci yang mengidentifikasi nama dan gaya ikon umum. Misalnya, jika Anda mencari "Swift" kami memanggil setiap ikon yang mungkin dapat digunakan sebagai panah. Kami juga telah menyertakan nama kelas setiap ikon untuk mudah disalin/menempel saat Anda berkembang!

Mereka bebas untuk digunakan dan dilisensikan di bawah MIT. Gunakan di mana pun Anda mau, pribadi atau komersial.

Memasang

npm install @uiw/file-icons --save

Penggunaan

Anda dapat menggunakan https://uiwjs.github.io/file-icons/ untuk dengan mudah menemukan ikon yang ingin Anda gunakan. Setelah Anda menyalin CLASSNAME CSS Ikon yang diinginkan, cukup tambahkan ikon dan ikon ClassName, seperti apple ke elemen HTML.

Misalkan nama font didefinisikan sebagai ffont , halaman beranda default adalah unicode , akan menghasilkan:

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

Pratinjau demo font-class.html , symbol.html annd index.html . Gaya yang dihasilkan secara otomatis ffont.css dan ffont.less .

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

Nama kelas

Dukungan untuk referensi gaya .less dan .css .

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

Digunakan dalam bereaksi

Ikon digunakan sebagai komponen. v1.3.0+ dukungan.

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

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

Untuk menggunakan gambar SVG sebagai komponen React secara langsung, diperlukan dukungan loader webpack.

Instal dependensi:

yarn add @svgr/webpack file-loader

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

Anda kemudian dapat mengimpor SVG sebagai komponen bereaksi seperti ini:

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

< ComLogo />

Komponen Ikon Kustom

Buat komponen 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 >
    ) ;
  }
}

Gunakan komponen Icon :

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

Kontributor

Seperti biasa, terima kasih kepada kontributor kami yang luar biasa!

Dibuat dengan GitHub-action-contributors.

Lisensi

Dibuat oleh SVGTOFONT, dilisensikan di bawah lisensi MIT.