项目中查看在线链接
然后会生成一串.js
的CDN
链接,比如这样:
打开项目的index.html
文件,添加script
标签,把链接加进去。
复杂项目中并不一定是放到这个html
文件中,反正最终是要放到项目中的。
或者用js操作dom
创建script
标签,作用也是一样的。
添加icon样式
然后创建一个common.css
文件,把icon样式加进去,
.ali-icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
类名可以用官方文档的,也可以自己取一个,随意。原则是不要和其他类名冲突。
像这样:
不要忘了在index.js
中引入样式:
注意,这里的fill
属性是svg
的颜色填充,颜色值使用的是currentColor
,
该值表示当前的fill
属性颜色继承自父节点的color
的值。
比如我给svg
父节点定义一个颜色值,那么svg的颜色会跟着发生变化:
使用icon
icon的固定结构:
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-xxx"></use>
</svg>
在React中,xlink:href
要写成xlinkHref
,
class="icon"
要写成className="icon"
同样要注意的是,这里的class类名要和上面设置的css类名保持一致。
就像这样:
<svg className="ali-icon" aria-hidden="true">
<use xlinkHref="#icon-xxx"></use>
</svg>
示例
比如要使用右边这个icon
鼠标悬浮在icon上,点击复制代码
复制到的代码其实就是这个icon的名字,把这个名字添加到xlinkHref
中就行了。
在哪里用,就把svg结构放在哪里。
<svg className="ali-icon" aria-hidden="true">
<use xlinkHref="#icon-bianji1"></use>
</svg>
页面结果:
优雅一点
做个简单的封装
const SvgIcon = (props) => {
const { font } = props;
return <svg className="ali-icon" aria-hidden="true">
<use xlinkHref={`#${font}`}></use>
</svg>
}
使用:
const Todos = () => {
return <div className={styles.todos}>
<SvgIcon font='icon-bianji1' />
</div>
}
后记
每次往项目里添加新图标,就要更新一次线上链接,然后把index.html
中的script
标签引入的地址给换成最新的。
所以,写项目时,最好先考虑好要用到哪些图标,一次性放入项目,避免多次生成和更新线上链接。