<svg className={Style.icon} aria-hidden="true">
    <use xlinkHref={`#icon-Company`}></use>
style 
.icon {
  width: 1em; 
  height: 1em;
  vertical-align: -0.15em;//垂直外边距
  fill: currentColor;//填充颜色
  overflow: hidden;//超出部分隐藏
 import { CSSProperties } from 'react'
import { iconNameType } from '../../static/iconfont/iconNameType'
import Style from './index.module.scss'
 interface Props{
    fontSize?:number,
    className?:string,
    style?:CSSProperties,
    iconName:iconNameType
    color?:string
   const Icon = (props:Props) => {
    const {fontSize,className,style,iconName,color}=props
    const wrapperStyle={...style,fontSize:fontSize+'px',color}
    return (
        <div className={className} style={wrapperStyle}>
          <svg className={Style.icon} aria-hidden="true">
            <use xlinkHref={`#icon-${iconName}`}></use>
export default Icon
    
const fs =require('fs')
const fileName='./iconfont.js'
const iconNameTypePath ="./iconNameType.ts"
const readFile=(filePathName)=>{
    fs.readFile(filePathName,'utf-8',(error,data)=>{
        if (error) {
            throw error
    //获取所有id="icon-Company"格式的正则
     const reg=/id="[a-zA-Z-]*"/g
    //id="icon-Company需要被替换正则
      const searchValueReg=/(id="icon-)|"/g 
    //   map(item=>item.replaceAll(searchValueReg,""))
    const idMatchArrs=  data.match(reg)
   const idArrs= idMatchArrs.map(item=>{
   const replactItem= item.replaceAll(searchValueReg,"")
   return `"${replactItem}"`
   const iconNameType=idArrs.join("|")
   console.log('====================================');
   console.log(iconNameType);
   console.log('====================================');
   fs.writeFile(iconNameTypePath,
    `export type iconNameType=${iconNameType}`,
    'utf8',(err)=>{
        if (err) {
            console.log('====================================');
            console.log("write",err);
            console.log('====================================');
function generateIconType(){
    readFile(fileName)
generateIconType()
    
Built on Forem — the open source software that powers DEV and other inclusive communities.
      
Made with love and Ruby on Rails. DEV Community © 2016 - 2024.