หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ดาวน์โหลดแบบอักษร
ดาวน์โหลด

ตัวอักษรไอคอนไฟล์

ไอคอนไฟล์ในแผนผังไฟล์โดยใช้ VSCODE-MATERIAL-ICON-THEME

เยี่ยมชม https://uiwjs.github.io/file-icons/ และตรวจสอบคุณสมบัติการค้นหาซึ่งมีคำหลักที่ระบุชื่อและสไตล์ไอคอนทั่วไป ตัวอย่างเช่นหากคุณค้นหา "Swift" เราเรียกไอคอนทุกไอคอนที่อาจใช้เป็นลูกศร นอกจากนี้เรายังได้รวมชื่อคลาสของไอคอนแต่ละรายการไว้เพื่อคัดลอก/วางง่ายเมื่อคุณกำลังพัฒนา!

พวกเขามีอิสระที่จะใช้และได้รับใบอนุญาตภายใต้ MIT ใช้พวกเขาทุกที่ที่คุณเห็นว่าเหมาะสมส่วนตัวหรือเชิงพาณิชย์

ติดตั้ง 

npm install @uiw/file-icons --save

การใช้งาน

คุณสามารถใช้ https://uiwjs.github.io/file-icons/ เพื่อค้นหาไอคอนที่คุณต้องการใช้ได้อย่างง่ายดาย เมื่อคุณคัดลอก CSS className ของไอคอนที่ต้องการเพียงเพิ่มไอคอนและชื่อคลาสของไอคอนเช่น apple ไปยังองค์ประกอบ HTML

สมมติว่าชื่อตัวอักษรถูกกำหนดเป็น ffont หน้าแรกเริ่มต้นคือ unicode จะสร้าง: 

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

ดูตัวอย่างตัวอย่าง font-class.html , symbol.html annd index.html สไตล์ที่สร้างขึ้นโดยอัตโนมัติ ffont.css และ ffont.less

สัญลักษณ์ SVG 

< svg class = " icon " aria-hidden = " true " >
  < use xlink : 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 >
< span class =" iconfont " > &#59907; </ span >

ชื่อชั้นเรียน

สนับสนุนการอ้างอิงสไตล์ .less และ .css 

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

ใช้ใน React

ไอคอนถูกใช้เป็นส่วนประกอบ v1.3.0+ การสนับสนุน 

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

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

ในการใช้อิมเมจ SVG เป็นส่วนประกอบ React โดยตรงจำเป็นต้องมีการรองรับ WebPack Loader

ติดตั้งการพึ่งพา: 

yarn add @svgr/webpack file-loader

กำหนดค่า 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)$ / ] ,
  } ,
} ,

จากนั้นคุณสามารถนำเข้า SVG เป็นองค์ประกอบปฏิกิริยาเช่นนี้: 

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

< ComLogo />

ส่วนประกอบไอคอนที่กำหนดเอง

สร้างองค์ประกอบ 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 >
    ) ;
  }
}

ใช้ส่วนประกอบ Icon : 

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

ผู้มีส่วนร่วม

เช่นเคยขอบคุณผู้มีส่วนร่วมที่น่าทึ่งของเรา!

ทำด้วย GitHub-Action-Contributors

ใบอนุญาต

สร้างโดย SVGTOFONT ซึ่งได้รับใบอนุญาตภายใต้ใบอนุญาต MIT

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด