@uiw/icons

Installation

npm install @uiw/icons --save

HTML Example

<linkrel="stylesheet"type="text/css"href="node_modules/@uiw/icons/w-icon.css">

@import"~@uiw/icons/fonts/w-icon.css";

import'@uiw/icons/fonts/w-icon.css';// orimport'@uiw/icons/fonts/w-icon.less';

<iclass="w-icon-apple"></i>

<style>.iconfont{font-family:"w-icon"!important;font-size:16px;font-style: normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing: grayscale;}</style><spanclass="iconfont">&#59907;</span>

<linkrel="stylesheet"type="text/css"href="https://unpkg.com/@uiw/icons/fonts/w-icon.css"><spanclass="w-icon-adobe"></span>

{test:/w-icon\.(eot|ttf|svg)$/,use:[{loader:require.resolve('url-loader'),options:{limit:8192}},{loader:require.resolve('file-loader'),options:{name:'static/fonts/[name].[hash:8].[ext]',}}]},

Used in React

import{Adobe,Alipay}from'@uiw/icons';import{Alipay}from'@uiw/icons/Alipay';<Adobestyle={{fill:'red'}}/><Alipayheight="36"/>

yarn add @svgr/webpack file-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)$/],},},

import{ReactComponentasComLogo}from'@uiw/icons/icon/alipay.svg';<ComLogo/>

importReactfrom'react';importsvgPathsfrom'@uiw/icons/fonts/w-icon.json';constrenderSvgPaths=(type)=>{constpathStrings=svgPaths[type];if(pathStrings==null){returnnull}returnpathStrings.map((d,i)=><pathkey={i}d={d}fillRule="evenodd"/>)}exportdefaultclassIconextendsReact.PureComponent{render(){const{ type, color}=this.props;if(type==null||typeoftype==="boolean"){returnnull;}return(<svgfill={color}viewBox={`0 0 24 24`}>{this.renderSvgPaths(type)}</svg>);}}

constdemo=()=>{return(<Icontype="heart-on"/>)}

Development

npm run font

npm run start

Contributors

License