1b527fca3f
Responsibility for finding and referencing images and fonts is now given to webpack. All the url references are now relative to the component scss file, and point to font & images files in src/, rather than assuming someone else will place them in dist. This makes the source more modular, and makes it easier to, for example, inline images are data URIs, or create a new build script that builds several modules for a project in a single pass. Workaround for bad font path in bundle.css: ExtactTextPlugin didn’t work as well with a subfolder reference in the filename. This is just a short-term fix and could probably be improved to put bundle.css back in the styles subfolder. Webpack handles images & fonts: Responsibility for finding and referencing images and fonts is now given to webpack. All the url references are now relative to the component scss file, and point to font & images files in src/, rather than assuming someone else will place them in dist. This makes the source more modular, and makes it easier to, for example, inline images are data URIs, or create a new build script that builds several modules for a project in a single pass. Clarify docs on spriting and webfonts: We've decided to remove sprity since it comes with hundreds of dependencies, and needs compilation within the "npm install" - dragging out the already overweight install process, and making the resulting node_modules/ folder less portable between systems. |
||
|---|---|---|
| .. | ||
| btn-icon | ||
| menu-icons | ||
| sprites-32x32 | ||
| sprites-32x32-2x | ||
| sprites-64x64 | ||
| sprites-64x64-2x | ||
| README.md | ||
Bitmap sprites will be phased out in the CMS UI in favour of web font icons as well as SVG graphics. During this transition, the sprites are still references, but there's no way to add new sprites to the system.
Original Instructions (no longer valid)
We use sprites to handle various icons and images throughout the CMS. These are automatically generated
by running npm run build and can be found at /admin/client/src/sprites/dist. To add new
images to the sprites, simply add the image to the folder matching the image's size in
/admin/client/sprites then run npm run sprites to generate the sprite containing your image.
Along with the new sprite containing your image, there will also be a new variable in
/admin/client/styles/legacy/_sprites.scss which you can use in your .scss file by first extending the class matching
the sprite (eg @extend .icon-sprites-32x32;), and then including your image using the variable
matching your image (eg @include sprite($sprites-32x32-my-image);).