svg
SVG
2023-09-11 14:17:22 时间
https://www.imooc.com/article/287034 (认证)
https://blog.csdn.net/li420520/article/details/83345936
https://blog.csdn.net/weixin_44314258/article/details/96000361
https://www.jianshu.com/p/7e65608ddc0a
阿里的Iconfont,有三种使用方式,本文只讲Symbol的使用。
1.准备文件
从Iconfont生成并下载Symbol方式的文件,如下(其中demo开头的文件可以不放到项目中,demo_index.html可以查看所有icon):
2. 引入工程中
把文件拷贝到assets/iconfont目录下
在main.js中引入
import 'assets/iconfont/iconfont.js'
3.在组件中使用
<svg class="icon" aria-hidden="true">
<use xlink:href="#iconcheck-circle"></use>
</svg>
......
.icon {
width:1em;height:1em;
vertical-align: -0.15em;
fill:currentColor;
overflow:hidden;
}
注:#iconcheck-circle对应的是demo_index.html中的id
相关文章
- SVG特效&canvas特效
- SVG里的几个实用动画元素的用法
- svg标签
- [React] Animate SVG Paths with Framer Motion
- [HTML5] Add an SVG Image to a Webpage and Get a Reference to the Internal Elements in JavaScript
- vue.js3.2.20: 使用svg(svg-sprite-loader@6.0.9)
- SVG Shapes之椭圆 <ellipse>
- SVG Shapes之折线 <polyline>
- [D3] 2. Basics of SVG
- Rappid HTML 5 + SVG Crack
- Qt 读取并且显示SVG图片
- 【Android 安装包优化】Android 中使用 SVG 图片 ( Android 5.0 以下的矢量图方案 | 矢量图生成为 PNG 图片 )
- Android使用SVG矢量创建很酷的动态效率!