svg中的symbol如何制作icon-H5教程-PHP中文网

首页

web前端

H5教程

svg中的symbol如何制作icon

不言

Aug 08, 2018 am 11:15 AM

gulpsvg

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

1. cnpm i gulp -g

2. 新建一个gulpfile.js文件

var gulp = require(&#39;gulp&#39;);
var svgSymbols = require(&#39;gulp-svg-symbols&#39;);
gulp.task(&#39;sprites&#39;,function(){
    return gulp.src(&#39;assets/svg/*.svg&#39;).pipe(svgSymbols()).pipe(gulp.dest(&#39;assets&#39;));
})

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中53207a333cb59025d48bd080b9112b21元素的使用及marker属性的介绍

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

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

聊聊如何利用 SVG 实现图片马赛克效果Sep 01, 2022 am 11:05 AM

不借助 Javascript，如何利用 SVG 实现图片马赛克效果？下面本篇文章就来带大家详细了解一下，希望对大家有所帮助！

svg怎么转jpg格式Nov 24, 2023 am 09:50 AM

svg可以通过使用图像处理软件、使用在线转换工具和使用Python图像处理库的方法来转jpg格式。详细介绍：1、图像处理软件包括Adobe Illustrator、Inkscape和GIMP；2、在线转换工具包括CloudConvert、Zamzar、Online Convert等；3、Python图像处理库等等。

深入浅析vue3+vite中怎么使用svg图标Apr 28, 2022 am 10:48 AM

svg图片在项目中使用的非常广泛，下面本篇文章带大家介绍一下如何在vue3 + vite 中使用svg图标，希望对大家有所帮助！

VUE3入门教程：使用Vue.js插件玩转SVGJun 16, 2023 am 09:48 AM

随着现代Web前端开发的不断发展，越来越多的技术被广泛应用于实际开发中。其中，Vue.js是目前最为流行的JavaScript框架之一，它基于MVVM模式，提供了丰富的API和组件库，使得开发响应式、可复用、高效的Web应用变得更加容易。而目前最新的Vue.js3版本相较于旧版，又有着更好的性能和更丰富的特性，引起了广泛的关注和研究。本文将会为大家介绍一种

学习如何在Laravel Elixir中运用Gulp框架Jan 22, 2024 am 11:27 AM

LaravelElixir是一个较为流行的前端自动化工具集，它基于Gulp，简化了许多以前需要手动进行的任务。但LaravelElixir的优雅API设计，并不意味着开发人员完全不用了解Gulp的使用。相反，了解Gulp的使用可以更好地理解LaravelElixir的工作原理，提高开发效率。本文将介绍如何在LaravelElixir框架中使用Gulp

详解用SVG给 favicon 添加标识Sep 07, 2022 am 10:30 AM

怎么使用SVG给 favicon 添加标识？下面本篇文章给大家介绍一下使用 SVG 生成带标识的 favicon的方法，希望对大家有所帮助！

在HTML5画布上绘制SVG文件Sep 15, 2023 pm 03:09 PM

要在画布元素上绘制HTMLImageElements，请使用drawImage()方法。此方法使用src=”mySVG.svg”定义一个Image变量，并在加载时使用drawImage。varmyImg=newImage();myImg.onload=function(){  ctx.drawImage(myImg,0,0);}img.src="http://www.example.com/files/sample.svg";

vue3+vue-cli4中怎么使用svgMay 11, 2023 pm 05:58 PM

一、安装svg-sprite-loadernpminstallsvg-sprite-loader--save-dev二、在src/components/svgIcon下新建组件index.vueimport{computed}from"@vue/reactivity";exportdefault{name:"baseSvgIcon",props:{iconClass:{type:String},className:{type:String},},setup

See all articles