简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > H5 Tutorial > body text

How to make icon from symbol in svg

不言
Release： 2018-08-08 11:15:08
Original
2486 people have browsed it

The content of this article is about how to create icons from symbols in svg. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. cnpm i gulp -g

2. Create a new gulpfile.js file 

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'));
})
Copy after login

3. Create a new assets/svg and put the downloaded svg into the svg file

Tip: Change the svg file name to the required id

4. Run gulp sprites

5. Use it directly in 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>
Copy after login

Related articles Recommended:

SVG drawing function: svg to draw a flower (with code)

The use of elements and marker attributes in svg Introduction

The above is the detailed content of How to make icon from symbol in svg. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
gulp svg
source：php.cn
Previous article：SVG drawing function: svg realizes drawing a flower (with code) Next article：Example of converting jpg image into svg text path animation (with code)
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Create a circular SVG temperature dragger in Angular? Here is a static demonstration of a circular thumb dragger I'm trying to create in Angular...
From 2024-04-03 09:33:29
0
1
376
Load SVG inline and change fill color I use the SVG like this: <imagex="0"y="0"width="40"height...
From 2024-04-02 13:32:42
0
1
321
Create map with D3 but country data does not appear I have created a map using D3 from topojson but in the html the data for the countries is ...
From 2024-04-02 10:29:33
0
1
282
SVG - ugly edges with multiple gradient fills I want to create a JavaScript color picker. I'm using SVG to create a color triangle like ...
From 2024-04-01 20:00:27
0
1
289
Reactjs SVG icons are different sizes despite the same css This is my first time building a website using reactjs. I've been using ReactJS icons from...
From 2024-04-01 13:18:38
0
1
355
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！