简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > H5教程 > 正文

svg中的symbol如何制作icon

不言
发布： 2018-08-08 11:15:08
原创
2486 人浏览过

本篇文章给大家带来的内容是关于svg中的symbol如何制作icon，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

1. cnpm i gulp -g

2. 新建一个gulpfile.js文件

var gulp = require('gulp');
var svgSymbols = require('gulp-svg-symbols');
gulp.task('sprites',function(){
    return gulp.src('assets/svg/*.svg').pipe(svgSymbols()).pipe(gulp.dest('assets'));
})
登录后复制

3.新建assets/svg，将下载下来的svg放到svg文件中

Tip:将svg文件名改成需要的id

4.运行gulp sprites

5.直接在HTML中使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .icon{
        width:32px;
        height:32px;
        fill:red;
    }
    </style>
</head>
<body>
    <svg class="icon">
        <use xlink:href="/assets/svg-symbols.svg#boat"></use>
    </svg>
</body>
</html>
登录后复制

 相关文章推荐：

SVG画图功能：svg实现画出一朵花（附代码）

svg中元素的使用及marker属性的介绍

以上是svg中的symbol如何制作icon的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
gulp svg
来源：php.cn
上一篇：SVG画图功能：svg实现画出一朵花（附代码） 下一篇：jpg图片转换成svg文字路径动画的实例（附代码）
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
在 Angular 中创建圆形 SVG 温度拖动器？ 这是我尝试在Angular中创建的圆形拇指拖动器的静态演示。它使用rinkle-dashoffset="-260"设置将拇指/拖动器定位在靠近拇指后面的圆形路径...
来自于 2024-04-03 09:33:29
0
1
376
将 SVG 加载为内联并更改填充颜色 我这样使用SVG：<imagex="0"y="0"width="40"height="40"h...
来自于 2024-04-02 13:32:42
0
1
321
用D3创建地图但国家数据没有出现 我已经从topojson使用D3创建了一张地图，但在html中，国家/地区的数据尚未显示。大家好！我已经从topojson文件中使用d3生成了欧洲地图。这是我的代码constsvg...
来自于 2024-04-02 10:29:33
0
1
282
SVG - 具有多个渐变填充的丑陋边缘 我想创建一个JavaScript颜色选择器。我正在使用SVG创建一个颜色三角形，如下所示：body{background:black;}<svgxmlns="htt...
来自于 2024-04-01 20:00:27
0
1
289
尽管 css 相同，但 Reactjs SVG 图标大小不同 这是我第一次使用reactjs构建网站。我一直在使用React图标库中的ReactJS图标。当这些图标在网站的同一部分重复时，其大小会有所不同。附上照片供您参考'。我使用检查进行了...
来自于 2024-04-01 13:18:38
0
1
355
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！