gulp-svg-symbols icon indicating copy to clipboard operation
gulp-svg-symbols copied to clipboard

Tell me how to disable viewBox in the final SVG

Open yura-master-web opened this issue 4 years ago • 1 comments

I want to get the output of the svg view without viewBox

<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="icon_otkos-niz_lico" > <path d="M0.5,15.5L24,0 M0.5,0v16"/> 
</symbol>

Here is my config

import gulp from 'gulp';
import svgSymbols from 'gulp-svg-symbols';
import gulpIf from 'gulp-if';
import rename from 'gulp-rename';
import plumber from 'gulp-plumber';
import errorHandler from 'gulp-plumber-error-handler';
import path from 'path';

export const icons = () =>
    gulp
        .src('front/icons/**/*.svg')
        .pipe(plumber({errorHandler: errorHandler('Error in "icons" task')}))
        .pipe(
            svgSymbols({
                title: false,
                id: 'icon_%f',
                class: '%f',
                templates: [path.join(__dirname, '../front/styles/functions/svg-size.styl'), 'default-svg'],
                viewBox: false
            })
        )
        .pipe(gulpIf(/\.styl$/, gulp.dest('front/styles/helpers')))
        .pipe(gulpIf(/\.svg$/, rename('icon.svg')))
        .pipe(gulpIf(/\.svg$/, gulp.dest('public/assets/public/images/')));

Now I get SVG with viewBox

<svg xmlns="http://www.w3.org/2000/svg">
     <symbol id="icon_otkos-niz_lico" viewBox="0 0 24 16"> <path d="M0.5,15.5L24,0 M0.5,0v16"/> 
     </symbol>

yura-master-web avatar Jan 24 '20 09:01 yura-master-web

Hi @Yurajun

this can be achieved in two ways:

  • use gulp-cheerio at the end to process the plugin output
  • use a custom template base on the default SVG

Hiswe avatar Jan 26 '20 10:01 Hiswe