gulp-svg-symbols 使用教程

gulp-svg-symbols 使用教程

gulp-svg-symbolsConvert svg files to symbols 项目地址:https://gitcode.com/gh_mirrors/gu/gulp-svg-symbols

1. 项目的目录结构及介绍

gulp-svg-symbols/
├── README.md
├── gulpfile.js
├── package.json
├── src/
│   └── img/
│       └── *.svg
└── dist/
    └── icon/
        ├── default-css.css
        ├── default-demo.html
        └── default-svg.svg

• README.md: 项目说明文档。
• gulpfile.js: Gulp 配置文件，定义了任务和插件的使用。
• package.json: 项目依赖和脚本配置。
• src/img/: 存放原始 SVG 文件的目录。
• dist/icon/: 生成的 SVG Sprites 和相关文件存放的目录。

2. 项目的启动文件介绍

gulpfile.js

gulpfile.js 是 Gulp 的配置文件，定义了如何处理 SVG 文件并生成 SVG Sprites。以下是主要内容：

const gulp = require('gulp');
const svgSymbols = require('gulp-svg-symbols');
const svgmin = require('gulp-svgmin');
const rename = require('gulp-rename');

gulp.task('svgSymbols', () => {
  return gulp.src('src/img/*.svg')
    .pipe(svgmin())
    .pipe(svgSymbols({
      id: 'sanshui-svg-%f',
      className: 'sanshui-svg-%f',
      title: false,
      fontSize: 200,
      templates: ['default-svg', 'default-css', 'default-demo']
    }))
    .pipe(rename((path) => {
      path.basename = 'sanshui-svg-icon';
    }))
    .pipe(gulp.dest('dist/icon'));
});

• svgmin: 用于压缩 SVG 文件。
• svgSymbols: 用于生成 SVG Sprites。
• rename: 用于重命名生成的文件。

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的依赖和脚本配置。以下是主要内容：

{
  "name": "gulp-svg-symbols",
  "version": "1.0.0",
  "description": "A gulp plugin to generate SVG symbols sprites",
  "main": "gulpfile.js",
  "scripts": {
    "start": "gulp svgSymbols"
  },
  "dependencies": {
    "gulp": "^4.0.2",
    "gulp-svg-symbols": "^2.0.0",
    "gulp-svgmin": "^3.0.0",
    "gulp-rename": "^2.0.0"
  }
}

• name: 项目名称。
• version: 项目版本。
• description: 项目描述。
• main: 主文件路径。
• scripts: 定义了启动命令 npm start。
• dependencies: 项目依赖的 Gulp 插件。

通过以上配置，你可以使用 npm start 命令来启动项目，生成 SVG Sprites。

gulp-svg-symbolsConvert svg files to symbols 项目地址:https://gitcode.com/gh_mirrors/gu/gulp-svg-symbols