React简书项目实战【2】icon优化header

下载icon

登录www.iconfont.cn

下载3个icon

导入

在statics文件夹下创建一个iconfont文件夹

将文件导入

配置

将iconfont.css改为iconfont.js

将样式注册到全局

import { createGlobalStyle } from &＃39;styled-components&＃39;
export const Globalstyle2 &＃61; createGlobalStyle&＃96;
&＃64;font-face {font-family: "iconfont"; /* Project id 3487186 */src: url(&＃39;./iconfont.woff2?t&＃61;1656320768780&＃39;) format(&＃39;woff2&＃39;),url(&＃39;./iconfont.woff?t&＃61;1656320768780&＃39;) format(&＃39;woff&＃39;),url(&＃39;./iconfont.ttf?t&＃61;1656320768780&＃39;) format(&＃39;truetype&＃39;);
}.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}.icon-yongyan:before {content: "\e600";
}.icon-sousuo:before {content: "\e62f";
}.icon-Aa:before {content: "\e636";
}
&＃96;;


在index.js引入文件

import React from &＃39;react&＃39;;
import ReactDOM from &＃39;react-dom&＃39;;
import &＃39;./style.js&＃39;;
import App from &＃39;./App&＃39;;
import &＃39;./statics/iconfont/iconfont.js&＃39;ReactDOM.render(<App />,document.getElementById(&＃39;root&＃39;));


App.js

import React, { Fragment,Component } from "react";
import Header from "./common/header";
import {Globalstyle2} from "./statics/iconfont/iconfont";
import {Globalstyle} from "./style";
class App extends Component{render() {return (<Fragment><Globalstyle/><Globalstyle2 /><Header /></Fragment>);}
}
export default App;


应用

header下的index.js

import React, { Component } from "react";
import {SearchWrapper,HeaderWrapper,Logo,Nav,NavItem,NavSearch,Addition,Button} from "./style";
class Header extends Component {render() {return (<HeaderWrapper><Logo /><Nav><NavItem className&＃61;&＃39;left active&＃39;>首页</NavItem><NavItem className&＃61;&＃39;left&＃39;>下载App</NavItem><NavItem className&＃61;&＃39;right&＃39;>登录</NavItem><NavItem className&＃61;&＃39;right&＃39;><i className&＃61;"iconfont ">&#xe636;</i></NavItem><SearchWrapper><NavSearch></NavSearch><i className&＃61;"iconfont ">&#xe62f;</i></SearchWrapper></Nav><Addition><Button className&＃61;&＃39;writting&＃39;><i className&＃61;"iconfont ">&#xe600;</i>写文章</Button><Button className&＃61;&＃39;reg&＃39;>注册</Button></Addition></HeaderWrapper>)}
}export default Header;


header下的style.js

import styled from &＃39;styled-components&＃39;;
import logoPic from &＃39;../../statics/logo.png&＃39;
export const HeaderWrapper &＃61; styled.div&＃96;position: relative;height: 58px;border-bottom: 1px solid #f0f0f0;
&＃96;;
export const Logo &＃61; styled.a.attrs({href:&＃39;/&＃39;})&＃96;position: absolute;top: 0;left: 0;display: block;width: 100px;height: 56px;background: url(${logoPic});background-size: contain;
&＃96;;
export const Nav &＃61; styled.div&＃96;width: 960px;height: 100%;padding-right: 70px;box-sizing: border-box;margin: 0 auto;
&＃96;;
export const NavItem &＃61; styled.div&＃96;line-height: 56px;padding: 0 15px;font-size: 17px;color: #333;&.left {float: left;}&.right {float: right;color: #969696;}&.active {color: #ea6f5a;}
&＃96;;
export const SearchWrapper &＃61; styled.div&＃96;position: relative;float: left;.iconfont {position: absolute;right: 5px;bottom: 5px;width: 30px;line-height: 30px;border-radius: 15px;text-align: center;}
&＃96;;
export const NavSearch &＃61; styled.input.attrs({placeholder: &＃39;搜索&＃39;
})&＃96;width: 160px;height: 38px;padding: 0 20px;margin-top: 9px;margin-left: 20px;box-sizing: border-box;border: none;outline: none;border-radius: 19px;background: #eee;font-size: 14px;,&::placeholder {color: #999;}
&＃96;;export const Addition &＃61; styled.div&＃96;position: absolute;right: 0;top: 0;height: 56px;
&＃96;;export const Button &＃61; styled.div&＃96;float: right;margin-top: 9px;margin-right: 20px;padding: 0 20px;line-height: 38px;border-radius: 19px;border: 1px solid #ec6149;font-size: 14px;&.reg {color: #ec6149;}&.writting {color: #fff;background: #ec6149;}
&＃96;;


注意&＃xff1a;使用火狐浏览器可能存在不显示icon情况