0

Colleagues, I'm trying Parcel as an alternative to webpack project builder and I like it, but there are two BUTs that I still can't beat (here are links to starting builds - build on Parcel and build on webpack):

1) In the assembly under the webpack, I used svg-sprite-loader to create svg sprites, which adds immediately after opening body svg with symbols like this:

enter image description here

there is no such plugin in the parcel assembly, I tried to install parcel-plugin-svg-sprite, but it does not compile a separate sprite (at least I did not find such a solution in the documentation). As a result, for now, I am inserting svg in the way described in the parcel documentation (I use a pug in the project):

svg
   use (href = "../../ icons / facebook.svg")

but in this case, I only get an empty space ((

2) When building a project, i get one folder with a lot of files, which is not very convenient, in the documentation I found that i can use the -d flag to set a name for the folder in which building the project, but did not find how to separate html/css/js/imgs by folders.

Thanks in advance for any help.

Andrew Stegmaier
  • 3,429
  • 2
  • 14
  • 26
Николай Пушкин
  • 149
  • 1
  • 5

2 Answers2

1

  1. I don't think that there is yet a plugin for parcel2 that will allow you to easily create svg sprites. The parcel-plugin-svg-sprite package you mentioned is for parcel 1, so it is not expected to work. (In general, you can expect parcel 2 plugins to conform to this naming scheme - packages that start with parcel-plugin are probably for parcel 1).

    As a workaround, the easiest way to use svgs in a pug template built with parcel would be to use an <img> or an <object> tag with a src property, e.g:

    img(src="../../icons/facebook.svg")

    or

    object(data="../../icons/facebook.svg")

    Doing it this way, where the svg file is "external" has a few limitations(discussed in the docs), notably there will be an extra round trip to download each svg (this would be good for caching, but bad if there were hundreds of svgs on your site). Also, you can't style the svg with css from the surrounding document.

    You can avoid the first limitation (extra server round trip) by using css background-image/background property with a data URL (see docs)

    .pug file

    .icon-test

    .(s)css file

    .icon-test {
   background-image: url('data-url:../../icons/facebook.svg'); ​
​}

    ​(In react-based projects there is a way to avoid both these limitations and get parcel to inject the SVG as inline JSX through the @parcel/transformer-react-svg plugin (see docs), but I'm not aware of a similar plugin (yet) for pug templates.)

  2. You can control the structure of the output files in parcel's dist folder by writing a custom namer plugin. I explained how to do this in this answer.

Andrew Stegmaier
  • 3,429
  • 2
  • 14
  • 26
  • Thanks a lot, about the svg sprite, I have not yet resolved the question, but for now I tend to use background-image and service like https://yoksel.github.io/url-encoder/. Regarding the structure - thank you very much for your help. – Николай Пушкин Nov 19 '21 at 12:35
  • Parcel will automatically do the url-encoding for you without the need for a separate tool - see https://parceljs.org/features/bundle-inlining/#inlining-as-a-data-url – Andrew Stegmaier Nov 19 '21 at 13:10
0

The plugin developer for the first parcel made the build for the parcel v2, and I say thank you! Here is the plugin, tested it with html and pug, everything works! https://github.com/Epimodev/parcel-plugin-svg-sprite

Николай Пушкин
  • 149
  • 1
  • 5