使用iconfont嵌入头部图标
这一章，我们要引入iconfont。
1.在阿里巴巴矢量图库中，新建一个项目。
image.png
2.搜索我们需要的图标，加入购物车。
image.png
3.把购物车选好的图标，添加至项目
image.png
4.在我的项目中，下载图标
image.png
接下来我们来使用图标
1.解压我们下载下来的图标的压缩包，红框标注的是我们需要放到我们自己项目中的文件
image.png
我们把这些文件放到src/statics/iconfont/路径下。
2.新建src/statics/iconfont/iconfont.js
这里面的内容都是src/statics/iconfont/iconfont.css文件中改成js文件的。原理是第三方模块styled-component的用法。其中我们最好把里面引入字体图标的路径改成./这种相对路径。
//===>src/statics/iconfont/iconfont.js
import { createGlobalStyle } from 'styled-components';
export const IconFontStyle = createGlobalStyle`
@font-face {font-family: "iconfont";
src: url('./iconfont.eot?t=1594978502498'); /* IE9 */
src: url('./iconfont.eot?t=1594978502498#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAARcAAsAAAAACHgAAAQNAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDHAqEOINzATYCJAMQCwoABCAFhG0HQxtgB1GUMEoH2c8Em+7aAgMhPBtUDJ/cuLUVOsG31nj4Gube3/132eyldFVUqTIT28c3wNUmHF2iQBmEBuPx3eIz9J7+pXTawcgA3sRrM+gBVPDkPzpLc5kHun8jItSTfEWocOCyNr1yCihnxKbU3NrmRqycz3NNvXx+YPnt7FwWFR5N2/PDAY5bBxZRWEAD3cBl6hvGLmiJpwl0q/xgZ/vrA/qSOSkQrxxN0M8EZQMXmmdYsTLFFyDUyifedQCfg+/HP5iHhGJQmWedP9mZsPzJ2/mjudFq6hgwYbo42Doq9gBJPKtMPtCK8nv4utq/7QDQNIWpuno7xyHzUZzN+ssjVIUYMp0TiN0vVH7iKAQ/M1a5hkEF0zm+oeMrAP4Ddvn+qcjWFuX+biotppjut0alqn1Y+fnrIFtuVUH/8mkA9Ojf1dSb2BgIv4MbiLK/zWD0Fvm0cxj2Wm2kStfvtlt4VDZ1pNdh6U0oCsePe/nNX4IvkE8zLTqXIN/gSb+C7CMH05itFup5+Xwjy8JFyxZuNFBUKQtZNnaR6QCNyxexviyLL7g/jKbL6CluZsoZFl6DU6lCamzZHXoaW8KOK7/L1Jp8F+GtCwxe4IdBC0+jjDteqXdaVVwpTFt8QRkvuYmMZwV/4vv1vxAViAmTArq9y0llrTwnMeZ1Hex/zRr/Y+P+yd0BEOdG8wu/u5NRsbqoG04G+6YVu/dGDyUWqU5F6vOJ3szQAS0S5VCs1JZ38Xau0L3v0rGtB1CZp8j4BM86dcBAJgmfz0kqPnGiO7dVt8swriP78P7kIsnM6LERfVu2Zk/cbQytY3g7RYsFLWHvXdZUVxYCa33CeN7hTepxknELLo+2HWukx3iNcBnV8WJI2KXExMI5xOQBQxMHDJs8J3aNbZsc2hLTOvEgYtYK9N5shuXI/B4hCJE7EAFcc/V0C1z/50Ynv35UisMEovrh71/m9ujtT72a+NbkCX4452Kg727opoemX2hSTf/an1gD8ceqWcxQpuKXy7kFCxSkC6NPKOg6/nCZOU+ncC92riQ0iwmKMSuomjUy2T0MjOxjqDlEtytj/ci8Pi2R49gxASDM2IViyjdUM26QyT7BwJJ3GJoJPrpbod9xZCNIlZIwZWxiU42kIaFlRzIVVt9Y5z4laUvAvzhJnRQGBwTlSwcOOZliTr9Cz/tnFqJEAkwH57HvC/Yk4rKRjS1ZFi0CA1HVi8bNEoByKsFIhplQkxoiGUTI8upnVOHzN0zL+UjSoKmqX1gi5fSOggUI6kAenGEnza3076egzfWXsfA4JCECKB3GmW/lBeqpHuZihsyYZUA2shCIaqGuzvHy7uANN0Bn3phRokbGQDmm3pA8IPlyFKJQm+Q6XgAAAAAA') format('woff2'),
url('./iconfont.woff?t=1594978502498') format('woff'),
url('./iconfont.ttf?t=1594978502498') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('./iconfont.svg?t=1594978502498#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
`
3.导入图标
这里，重点是我们导入了刚才写的字体图标样式import { IconFontStyle } from '../../statics/iconfont/iconfont';然后我们要用<Fragment><IconFontStyle/>...</Fragment>包裹住之前的那些组件，这样就可以使用字体图标了
//===>src/common/header/index.js
import React, { Component, Fragment } from 'react'
import {
HeaderWrapper,
Logo,
Nav,
NavItem,
SearchWrapper,
NavSearch,
Addition,
Button
} from './style'
import { IconFontStyle } from '../../statics/iconfont/iconfont';
class Header extends Component {
render() {
return (
<Fragment>
<IconFontStyle />
<HeaderWrapper>
<Logo />
<Nav>
<NavItem className='left'>首页</NavItem>
<NavItem className='left'>下载App</NavItem>
<NavItem className='right'>登录</NavItem>
<NavItem className='right'>
<span className="iconfont"></span>
</NavItem>
<SearchWrapper>
<NavSearch></NavSearch>
<span className="iconfont"></span>
</SearchWrapper>
<Addition>
<Button className='writting'>
<span className="iconfont"></span>写文章
</Button>
<Button className='reg'>注册</Button>
</Addition>
</Nav>
</HeaderWrapper>
</Fragment>
)
}
}
export default Header
刚刚我们下载的zip压缩包中，打开这个网页，里面告诉我们应该如何使用字体图标。
image.png
image.png
image.png
4.最后，我们改改header中NavSearch和SearchWrapper的样式
//===>src/common/header/style.js
...
export const SearchWrapper = styled.div`
position:relative;
float:left;
.iconfont{
position:absolute;
right:5px;
bottom:5px;
width:30px;
line-height:30px;
border-radius:15px;
// background:green;
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;
}
`
...
效果
搜索框动画效果实现
在React里，我们不希望操作dom对象，所以，这里我们的思想是，通过时间监听动态修改参数的方式，结合react-transition-group模块，来写动画。
引入之前我们用到的css动画第三方模块
cnpm install react-transition-group --save
1.修改Header模块
//===src/common/header/index.js
import { CSSTransition } from 'react-transition-group'
...
class Header extends Component {
constructor(props) {
super(props)
this.state = {
focused: false
}
this.handleInputFocus = this.handleInputFocus.bind(this)
this.handleInputBlur = this.handleInputBlur.bind(this)
}
render() {
return (
<Fragment>
...
<SearchWrapper>
<CSSTransition
in={this.state.focused}
timeout={200}
classNames="slide">
<NavSearch
className={this.state.focused ? 'focused' : ''}
onFocus={this.handleInputFocus}
onBlur={this.handleInputBlur}>
</NavSearch>
</CSSTransition>
...
</Fragment>
)
}
handleInputFocus() {
this.setState({
focused: true
})
}
handleInputBlur() {
this.setState({
focused: false
})
}
}
export default Header
2.修改相关样式文件
//===>src/common/header/style.js
...
export const SearchWrapper = styled.div`
position:relative;
float:left;
.slide-enter{
transition:all .2s ease-out;
}
.slide-enter-active{
width:240px;
}
.slide-exit{
transition:all .2s ease-out;
}
.slide-exit-active{
width:160px;
}
.iconfont{
position:absolute;
right:5px;
bottom:5px;
width:30px;
line-height:30px;
border-radius:15px;
// background:green;
text-align:center;
&.focused{
background:#777;
color:#fff;
}
}
`
export const NavSearch = styled.input.attrs({
placeholder: '搜索'
})`
width:160px;
height:38px;
padding:0 30px 0 20px;
margin-top:9px;
margin-left:20px;
box-sizing:border-box;
border:none;
outline:none;
border-radius:19px;
background:#eee;
font-size:14px;
color:#777;
&::placeholder{
color:#999;
}
&.focused{
width:240px;
}
`
...
image.png
网友评论