- Notifications
You must be signed in to change notification settings - Fork19
The premium icon font for@uiwjs Component Library.https://uiwjs.github.io/icons
License
uiwjs/icons
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
The premium icon font foruiwjs Component Library. Designed@uiw/icons by@liwen0526.
Visithttps://uiwjs.github.io/icons/ and check out the search feature, which has keywords identifying common icon names and styles. For example, if you search for "arrow" we call up every icon that could possibly be used as an arrow. We've also included each icon's class name for easy copy / pasting when you're developing!
They are free to use and licensed underMIT. We intend for this icon pack to be used withuiw, but it’s by no means limited to it. Use them wherever you see fit, personal or commercial.
npm install @uiw/icons --save
You can usehttps://uiwjs.github.io/icons/ to easily find the icon you want to use. Once you've copied the desired icon's CSS classname, simply add the icon and icon's classname, such asapple to an HTML element.
You need link CSS
<linkrel="stylesheet"type="text/css"href="node_modules/@uiw/icons/w-icon.css">
Used in Less:
@import"~@uiw/icons/fonts/w-icon.css";
Used in JS:
import'@uiw/icons/fonts/w-icon.css';// orimport'@uiw/icons/fonts/w-icon.less';
note: It has aw-icon- prefix.
<iclass="w-icon-apple"></i>
Or use theUnicode, You can useUnicode website to easily find theUnicode icon you want to use.
<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"></span>
Or manually download and link**@uiw/icons** in your HTML, It can also be downloaded viaUNPKG:
<linkrel="stylesheet"type="text/css"href="https://unpkg.com/@uiw/icons/fonts/w-icon.css"><spanclass="w-icon-adobe"></span>
In Webpack
{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]',}}]},
Icons are used as components.v2.6.2+ support.
import{Adobe,Alipay}from'@uiw/icons';import{Alipay}from'@uiw/icons/Alipay';<Adobestyle={{fill:'red'}}/><Alipayheight="36"/>
To use SVG images as React components directly, webpack loader support is required.
Install dependencies:
yarn add @svgr/webpack file-loader
Configure 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)$/],},},
You can then import the SVG as a React component like this:
import{ReactComponentasComLogo}from'@uiw/icons/icon/alipay.svg';<ComLogo/>
Custom Icon Component
Create anIcon component.
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>);}}
Use theIcon component:
constdemo=()=>{return(<Icontype="heart-on"/>)}
Run thenpm install to install the dependencies after cloning the project and you'll be able to:
To build*.svg*.ttf*.woff*.eot files
npm run font
To build site and push gh-pages branch
npm run start
As always, thanks to our amazing contributors!
Made withgithub-action-contributors.
Created Bysvgtofont, Licensed under theMIT License.
About
The premium icon font for@uiwjs Component Library.https://uiwjs.github.io/icons
