React 简书项目实战icon优化header

天下之事常成于困约，而败于奢靡。这篇文章主要讲述React 简书项目实战icon优化header相关的知识，希望能为你提供帮助。
React 简书项目实战【2】icon优化header 下载icon登录www.iconfont.cn
【React 简书项目实战icon优化header】下载3个icon

导入在statics文件夹下创建一个iconfont文件夹
将文件导入

配置将iconfont.css改为iconfont.js
将样式注册到全局

importcreateGlobalStylefrom styled-components
export const Globalstyle2 = createGlobalStyle`
@font-face
font-family: "iconfont"; /* Project id 3487186 */
src: url(./iconfont.woff2?t=1656320768780) format(woff2),
url(./iconfont.woff?t=1656320768780) format(woff),
url(./iconfont.ttf?t=1656320768780) format(truetype);

.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";

`;

在index.js引入文件

import React from react;
import ReactDOM from react-dom;
import ./style.js;
import App from ./App;
import ./statics/iconfont/iconfont.js

ReactDOM.render(< App /> ,document.getElementById(root));

App.js

import React,Fragment,Componentfrom "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,Componentfrom "react";
import SearchWrapper,HeaderWrapper,Logo,Nav,NavItem,NavSearch,Addition,Button from "./style";
class Header extends Component
render()
return (
< HeaderWrapper>
< Logo />
< Nav>
< NavItem className=left active> 首页< /NavItem>
< NavItem className=left> 下载App< /NavItem>
< NavItem className=right> 登录< /NavItem>
< NavItem className=right>
< i className="iconfont "> & #xe636; < /i>
< /NavItem>
< SearchWrapper>
< NavSearch> < /NavSearch>
< i className="iconfont "> & #xe62f; < /i>
< /SearchWrapper>
< /Nav>
< Addition>
< Button className=writting>
< i className="iconfont "> & #xe600; < /i>
写文章< /Button>
< Button className=reg> 注册< /Button>
< /Addition>
< /HeaderWrapper>
)

export default Header;

header下的style.js

import styled from styled-components;
import logoPic from ../../statics/logo.png
export const HeaderWrapper = styled.div`
position: relative;
height: 58px;
border-bottom: 1px solid #f0f0f0;
`;
export const Logo = styled.a.attrs(href:/)`
position: absolute;
top: 0;
left: 0;
display: block;
width: 100px;
height: 56px;
background: url($logoPic);
background-size: contain;
`;
export const Nav = styled.div`
width: 960px;
height: 100%;
padding-right: 70px;
box-sizing: border-box;
margin: 0 auto;
`;
export const NavItem = styled.div`
line-height: 56px;
padding: 0 15px;
font-size: 17px;
color: #333;
& .left
float: left;

& .right
float: right;
color: #969696;

& .active
color: #ea6f5a;

`;
export const SearchWrapper = styled.div`
position: relative;
float: left;
.iconfont
position: absolute;
right: 5px;
bottom: 5px;
width: 30px;
line-height: 30px;
border-radius: 15px;
text-align: center;

`;
export const NavSearch = styled.input.attrs(
placeholder: 搜索
)`
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;

`;

export const Addition = styled.div`
position: absolute;
right: 0;
top: 0;
height: 56px;
`;

export const Button = styled.div`
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;

`;