1
votes

Passer des options au svgo intégré à partir de svgr / webpack

Existe-t-il une option pour transmettre les options svgo au chargeur svgr / webpack? Je veux supprimer les attributs de largeur et de hauteur et conserver la zone de visualisation, par défaut, il les supprime.

{
    test: /\.svg$/,
    use: ['@svgr/webpack'],
    options : {
    svgo: { // Something like this ?
        mergePaths: false,
        removeViewbox: false,
        removeAttrs: true,
    }}

},

javascript reactjs css webpack svg

0 commentaires

3 Réponses :

0
votes

Il a une syntaxe un peu déroutante avec des paramètres imbriqués. Voici ce que j'utilise pour désactiver les identifiants de préfixe et les noms de classe. Je suppose que dans votre cas, ce sera quelque chose comme mergePaths.active = false , removeViewbox.active = false .

loader: '@svgr/webpack',
    options: {
        svgoConfig: {
            plugins: [{
                removePaths: {
                    active: false,
                }
            },{
                removeViewbox: {
                    active: false,
                }
            },{
                removeAttrs: {
                    active: true,
                }
            }]
     }
}

Je n'ai pas testé, mais je suppose que cela ressemblerait à ceci (ou similaire, vous pourriez jouer un peu avec pour obtenir la bonne syntaxe):

loader: '@svgr/webpack',
    options: {
        svgoConfig: {
            plugins: [{
                prefixIds: {
                    prefixIds: false,
                    prefixClassNames: false
                }
            }]
     }
}

Regardez dans le code ici, où vous pouvez déterminer quels accessoires sont réellement exportés: https://github.com/svg/svgo

2 commentaires

Je viens de passer de svgr car il n'y a aucune documentation sur la façon de passer des arguments à svgo. react-svg-loader , d'autre part, a une documentation et fonctionne de la même manière, donc je recommanderais aux gens de l'utiliser

Je pense que le doco pour le svgr est assez bien, il suffit de jouer avec. Vous devez considérer qu'il est gratuit et open source et donc l'auteur le fait pendant son temps libre. Je regardais aussi svgr react-svg-loader lors de la prise de décision, mais svgr fonctionnait mieux pour moi. Mais c'est vrai que j'ai dû comprendre quelques éléments du code car ils n'étaient pas décrits en détail dans le doco.

0
votes

Je n'ai pas pu trouver un moyen de passer des arguments via svgr à svgo, alors je suis passé à react react-svg-loader qui a une documentation sur la façon d'y parvenir:

{
    test: /\.svg$/,
    use: [
        'babel-loader',
        {
            loader: 'react-svg-loader',
            options: {
                svgo: {
                    plugins: [{ removeDimensions: true, removeViewBox: false }],
                    floatPrecision: 2,
                },
            },
        },
    ],
},

0 commentaires

0
votes

Cela fonctionne comme décrit ici ou ici :

{
  test: /\.svg$/,
  use: [{
    loader: '@svgr/webpack',
    options: { 
      svgoConfig: {
        plugins: [
          { mergePaths: false },
          { removeViewbox: false },
          { removeAttrs: true },
        ],
      },
    },
  }],
}

0 commentaires