React 简书项目实战icon优化header

Posted 2022-07-04 小旺v

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

下载icon

登录www.iconfont.cn

下载3个icon

导入

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

将文件导入

配置

将iconfont.css改为iconfont.js

将样式注册到全局

import  createGlobalStyle  from 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,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=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;
    
`;

注意：使用火狐浏览器可能存在不显示icon情况