g-makarov / vite-plugin-svg-spritemap Goto Github PK

View Code? Open in Web Editor NEW

35.0 35.0 2.0 597 KB

This vite plugin generates a single SVG spritemap containing multiple elements from all .svg files in a directory.

License: MIT License

TypeScript 100.00%

icon icons sprite spritemap sprites svg svg-sprite svg-symbol symbol symbols typescript vite-plugin

vite-plugin-svg-spritemap's People

Contributors

Stargazers

Watchers

Forkers

marsup adufr

vite-plugin-svg-spritemap's Issues

SVG symbols not in <defs>, 'url(#some-gradient)' is not found.

Nice vite-plugin! However, I am having some troubles with it (and SVG in general, but that's a whole other topic).

In the automatically generated SVG spritemap the gradient is not displayed, not even the default values (in Firefox v120.0.1, MacOS 14). However: moving all symbols to defs element within the SVG spritemap (and moving all child defs elements to the top-level defs) makes it work. Therefore the manually edited SVG does display the default gradient values.

The other thing is, that I am not able to access either of these two in a way, that would allow me to e.g. adjust the colors using the embedded CSS3 variables and possibly start the animation (on the #spinner). I am currently a bit puzzled as to get it working, but I think this is not an issue with vite-plugin-svg-spritemap.

Would it make sense to move all defs contents to the top-level defs (including the symbol elements themselves)? It does change the "meaning" of the definitions though. If so, unless you have some time to spare, I could try to offer a PR.

Generated icons.svg

<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="copy" viewBox="0 0 330 330">
        <g fill="var(--copy__fill)">
            <path d="M35 270h45v45c0 8.284 6.716 15 15 15h200c8.284 0 15-6.716 15-15V75c0-8.284-6.716-15-15-15h-45V15c0-8.284-6.716-15-15-15H35c-8.284 0-15 6.716-15 15v240c0 8.284 6.716 15 15 15m245 30H110V90h170zM50 30h170v30H95c-8.284 0-15 6.716-15 15v165H50z"></path>
            <path d="M155 120c-8.284 0-15 6.716-15 15s6.716 15 15 15h80c8.284 0 15-6.716 15-15s-6.716-15-15-15zM235 180h-80c-8.284 0-15 6.716-15 15s6.716 15 15 15h80c8.284 0 15-6.716 15-15s-6.716-15-15-15M235 240h-80c-8.284 0-15 6.716-15 15 0 8.284 6.716 15 15 15h80c8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15"></path>
        </g>
    </symbol>
    <symbol id="spinner">
        <defs>
            <linearGradient id="a" x1="8.042%" x2="65.682%" y1="0%" y2="23.865%">
                <stop offset="0%" stop-color="var(--spinner__stop0, red)" stop-opacity="0"></stop>
                <stop offset="63.146%" stop-color="var(--spinner__stop1, red)" stop-opacity=".631"></stop>
                <stop offset="100%" stop-color="var(--spinner__stop2, red)"></stop>
            </linearGradient>
        </defs>
        <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
            <path stroke="url(#a)" stroke-width="2" d="M36 18c0-9.94-8.06-18-18-18">
                <animateTransform attributeName="transform" dur="0.9s" from="0 18 18" repeatCount="indefinite"
                                  to="360 18 18" type="rotate"></animateTransform>
            </path>
            <circle cx="36" cy="18" r="1" fill="var(--spinner__leading-dot, white)">
                <animateTransform attributeName="transform" dur="0.9s" from="0 18 18" repeatCount="indefinite"
                                  to="360 18 18" type="rotate"></animateTransform>
            </circle>
        </g>
    </symbol>
</svg>

Manually edited icons.svg

<svg xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="a" x1="8.042%" x2="65.682%" y1="0%" y2="23.865%">
            <stop offset="0%" stop-color="var(--spinner__stop0, red)" stop-opacity="0"></stop>
            <stop offset="63.146%" stop-color="var(--spinner__stop1, red)" stop-opacity=".631"></stop>
            <stop offset="100%" stop-color="var(--spinner__stop2, red)"></stop>
        </linearGradient>
        <symbol id="copy" viewBox="0 0 330 330">
            <g fill="var(--copy__fill)">
                <path d="M35 270h45v45c0 8.284 6.716 15 15 15h200c8.284 0 15-6.716 15-15V75c0-8.284-6.716-15-15-15h-45V15c0-8.284-6.716-15-15-15H35c-8.284 0-15 6.716-15 15v240c0 8.284 6.716 15 15 15m245 30H110V90h170zM50 30h170v30H95c-8.284 0-15 6.716-15 15v165H50z"></path>
                <path d="M155 120c-8.284 0-15 6.716-15 15s6.716 15 15 15h80c8.284 0 15-6.716 15-15s-6.716-15-15-15zM235 180h-80c-8.284 0-15 6.716-15 15s6.716 15 15 15h80c8.284 0 15-6.716 15-15s-6.716-15-15-15M235 240h-80c-8.284 0-15 6.716-15 15 0 8.284 6.716 15 15 15h80c8.284 0 15-6.716 15-15 0-8.284-6.716-15-15-15"></path>
            </g>
        </symbol>
        <symbol id="spinner">
            <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
                <path stroke="url(#a)" stroke-width="2" d="M36 18c0-9.94-8.06-18-18-18">
                    <animateTransform attributeName="transform" dur="0.9s" from="0 18 18" repeatCount="indefinite"
                                      to="360 18 18" type="rotate"></animateTransform>
                </path>
                <circle cx="36" cy="18" r="1" fill="var(--spinner__leading-dot, white)">
                    <animateTransform attributeName="transform" dur="0.9s" from="0 18 18" repeatCount="indefinite"
                                      to="360 18 18" type="rotate"></animateTransform>
                </circle>
            </g>
        </symbol>
    </defs>
</svg>

Astro framework: spritemap file is not found in dev mode

Environment:
Astro framework + React components

When I use Astro in dev mode (vite under the hood) my React Icon component can't resolve the path: xlinkHref={`/spritemap.svg#icon-${name}`}

build works as usual perfect

Generating more than one result sprites

For example:
I have 2-3 folders with icons that should be assembled into sprites. Now all icons from all folders are collected into one final file. But it would be convenient either to keep the structure of the source folders, or to add a prefix with the folder name to the sprites.

BUG: The fill property of icon was removed by plugin

Hello. good lock
I am using with the plugin. unfortunately the plugin remove fill property from my icon

ex: regular svg icon:

and this is merged by spritemap plugin:

I wish the issue is closed. thanks

prefix

https://github.com/g-makarov/vite-plugin-svg-spritemap/blob/main/src/utils.ts#L44

I suggest you reconsider this way.
if the prefix is not needed, it would be good to get rid of -.

I suggest - make it part of a prefix that can be removed

How to use in laravel bootstrap website?

Just wondering how to use this in a Laravel bootstrap website. Trying to call @Vite('assets/icons.svg#mail' ), but to no effect. The icons.svg file is found on the dev server, but no icon is shown. I think the #mail is ignored or has to be used in another way?

`currentColor` should probably be `false` by default

Hi there,

Thanks for your work. We just spent a lot of times figuring out why our icons were missing their color, until we found out that currentColor option is true by default. It seems way too opinionated IMO. What about setting it false by default? Might save some time to others.

Regards

SVG sprite map generation error - Enable to load SVG icon from SVG sprite map

Hello!

I tried to use this plugin with Storybook, but any SVG icon cannot be loaded. I investigated and noticed that the sprite map gets created, but with an error. When I created the bundle, the sprite map I got has this error:

With that error, when I tried to load the SVG sprite map file directly from my browser, I got:

The error is about an icon if removed, resolved the rdf error above.
That SVG icon is the following :

<?xml version="1.0" encoding="UTF-8"?>
<svg id="svg51" width="180" height="53.333" version="1.1" viewBox="0 0 180 53.333"
	xml:space="preserve" xmlns="http://www.w3.org/2000/svg"
	xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><metadata id="metadata9"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/></cc:Work></rdf:RDF></metadata><path id="path11" d="m173.33 53.333h-166.66c-3.6666 0-6.6665-2.9999-6.6665-6.6665v-39.999c0-3.6666 2.9999-6.6665 6.6665-6.6665h166.66c3.6666 0 6.6665 2.9999 6.6665 6.6665v39.999c0 3.6666-2.9999 6.6665-6.6665 6.6665" fill="#100f0d" stroke-width=".13333"/><path id="path13" d="m173.33 1e-3h-166.66c-3.6666 0-6.6665 2.9999-6.6665 6.6665v39.999c0 3.6666 2.9999 6.6665 6.6665 6.6665h166.66c3.6666 0 6.6665-2.9999 6.6665-6.6665v-39.999c0-3.6666-2.9999-6.6665-6.6665-6.6665zm0 1.0661c3.0879 0 5.5999 2.5125 5.5999 5.6004v39.999c0 3.0879-2.5119 5.6004-5.5999 5.6004h-166.66c-3.0879 0-5.5993-2.5125-5.5993-5.6004v-39.999c0-3.0879 2.5114-5.6004 5.5993-5.6004h166.66" fill="#a2a2a1" stroke-width=".13333"/><path id="path35" d="m142.58 40h2.4879v-16.669h-2.4879zm22.409-10.664-2.8519 7.2264h-0.0853l-2.9599-7.2264h-2.6799l4.4399 10.1-2.5319 5.6185h2.5946l6.8412-15.718zm-14.11 8.7706c-0.81331 0-1.9506-0.40786-1.9506-1.4156 0-1.2865 1.416-1.7797 2.6373-1.7797 1.0933 0 1.6093 0.23546 2.2733 0.55732-0.19333 1.5442-1.5226 2.6379-2.9599 2.6379zm0.30133-9.1352c-1.8013 0-3.6666 0.79371-4.4386 2.5521l2.208 0.92184c0.47198-0.92184 1.3506-1.2218 2.2733-1.2218 1.2866 0 2.5946 0.77131 2.6159 2.1442v0.17133c-0.45066-0.25733-1.416-0.64318-2.5946-0.64318-2.3813 0-4.8039 1.3077-4.8039 3.7524 0 2.2302 1.952 3.6671 4.1386 3.6671 1.672 0 2.5959-0.75054 3.1732-1.6301h0.0867v1.2874h2.4026v-6.391c0-2.9593-2.2106-4.6103-5.0612-4.6103zm-15.376 2.3937h-3.5386v-5.7133h3.5386c1.86 0 2.9159 1.5396 2.9159 2.8566 0 1.2917-1.056 2.8567-2.9159 2.8567zm-0.064-8.0337h-5.9614v16.669h2.4869v-6.3149h3.4746c2.7573 0 5.4679-1.9958 5.4679-5.1765 0-3.1801-2.7106-5.1769-5.4679-5.1769zm-32.507 14.778c-1.7188 0-3.1573-1.4396-3.1573-3.415 0-1.9984 1.4385-3.4583 3.1573-3.4583 1.6969 0 3.0286 1.46 3.0286 3.4583 0 1.9754-1.3317 3.415-3.0286 3.415zm2.8567-7.8403h-0.086c-0.55826-0.66572-1.6328-1.2672-2.9853-1.2672-2.8359 0-5.4348 2.4921-5.4348 5.6925 0 3.1786 2.5989 5.6488 5.4348 5.6488 1.3525 0 2.427-0.6016 2.9853-1.2885h0.086v0.81558c0 2.1703-1.1598 3.3296-3.0286 3.3296-1.5245 0-2.4697-1.0953-2.8567-2.0188l-2.1691 0.90206c0.62238 1.503 2.2759 3.351 5.0259 3.351 2.9218 0 5.392-1.7188 5.392-5.9077v-10.181h-2.3634zm4.0822 9.7304h2.4906v-16.669h-2.4906zm6.164-5.4988c-0.0641-2.1911 1.6978-3.3078 2.9645-3.3078 0.98851 0 1.8254 0.49425 2.1057 1.2026zm7.7326-1.8906c-0.47238-1.2666-1.9114-3.6082-4.8541-3.6082-2.9218 0-5.3488 2.2983-5.3488 5.6707 0 3.1791 2.4062 5.6707 5.6275 5.6707 2.5989 0 4.1031-1.589 4.7264-2.513l-1.9333-1.289c-0.64465 0.94531-1.5249 1.5682-2.7931 1.5682-1.2666 0-2.1692-0.58012-2.7483-1.7186l7.5815-3.1359zm-60.409-1.8682v2.4057h5.7565c-0.17186 1.3532-0.62292 2.3411-1.3104 3.0286-0.83798 0.83745-2.1483 1.7614-4.4462 1.7614-3.5443 0-6.315-2.8567-6.315-6.4009s2.7707-6.4013 6.315-6.4013c1.9118 0 3.3077 0.75198 4.3388 1.7186l1.6974-1.6973c-1.4396-1.3745-3.351-2.427-6.0362-2.427-4.8552 0-8.9363 3.9524-8.9363 8.807 0 4.8541 4.0811 8.8066 8.9363 8.8066 2.6202 0 4.5967-0.85932 6.143-2.4702 1.5896-1.5896 2.0838-3.8234 2.0838-5.628 0-0.55785-0.04333-1.0734-0.1292-1.5032zm14.772 7.3675c-1.7188 0-3.201-1.4177-3.201-3.4368 0-2.0406 1.4822-3.4364 3.201-3.4364 1.7181 0 3.2003 1.3958 3.2003 3.4364 0 2.0191-1.4822 3.4368-3.2003 3.4368zm0-9.1075c-3.137 0-5.6927 2.3842-5.6927 5.6707 0 3.265 2.5557 5.6707 5.6927 5.6707 3.1358 0 5.692-2.4057 5.692-5.6707 0-3.2865-2.5562-5.6707-5.692-5.6707zm12.417 9.1075c-1.7176 0-3.2003-1.4177-3.2003-3.4368 0-2.0406 1.4828-3.4364 3.2003-3.4364 1.7188 0 3.2005 1.3958 3.2005 3.4364 0 2.0191-1.4817 3.4368-3.2005 3.4368zm0-9.1075c-3.1358 0-5.6915 2.3842-5.6915 5.6707 0 3.265 2.5557 5.6707 5.6915 5.6707 3.137 0 5.6927-2.4057 5.6927-5.6707 0-3.2865-2.5557-5.6707-5.6927-5.6707" fill="#fff" stroke-width=".13333"/><path id="path37" d="m27.622 25.899-14.194 15.066c5.34e-4 0.0031 0.0016 0.0057 0.0021 0.0089 0.43532 1.636 1.9296 2.8406 3.703 2.8406 0.70892 0 1.3745-0.19166 1.9453-0.52812l0.04533-0.02656 15.978-9.22-7.479-8.141" fill="#eb3131" stroke-width=".13333"/><path id="path39" d="m41.983 23.334-0.0136-0.0093-6.8982-3.999-7.7717 6.9156 7.7987 7.7977 6.8618-3.9592c1.203-0.64945 2.0197-1.9177 2.0197-3.3802 0-1.452-0.80571-2.7139-1.9968-3.3655" fill="#f6b60b" stroke-width=".13333"/><path id="path41" d="m13.426 12.37c-0.08533 0.31466-0.13018 0.64425-0.13018 0.98651v26.623c0 0.34162 0.04432 0.67233 0.13072 0.98587l14.684-14.681-14.684-13.914" fill="#5778c5" stroke-width=".13333"/><path id="path43" d="m27.727 26.668 7.3473-7.3451-15.96-9.2534c-0.58012-0.34746-1.2572-0.54799-1.9817-0.54799-1.7734 0-3.2697 1.2068-3.7051 2.8447-5.34e-4 0.0016-5.34e-4 0.0027-5.34e-4 0.0041l14.3 14.298" fill="#3bad49" stroke-width=".13333"/><path id="path33" d="m63.193 13.042h-3.8895v0.96251h2.9146c-0.0792 0.78545-0.39172 1.4021-0.91878 1.85-0.52705 0.44799-1.2 0.67292-1.9958 0.67292-0.87291 0-1.6125-0.30413-2.2186-0.90824-0.59385-0.61665-0.89584-1.3792-0.89584-2.2979 0-0.91864 0.30199-1.6812 0.89584-2.2978 0.60612-0.60412 1.3457-0.90624 2.2186-0.90624 0.44799 0 0.87504 0.07707 1.2666 0.24586 0.39172 0.16866 0.70625 0.40412 0.95211 0.70625l0.73958-0.73958c-0.33546-0.38132-0.76038-0.67292-1.2876-0.88544-0.52705-0.21253-1.077-0.31453-1.6708-0.31453-1.1645 0-2.1519 0.40412-2.9582 1.2104-0.80625 0.80825-1.2104 1.8041-1.2104 2.9811 0 1.177 0.40412 2.175 1.2104 2.9813 0.80625 0.80611 1.7937 1.2104 2.9582 1.2104 1.2229 0 2.1979-0.39172 2.9479-1.1876 0.66038-0.66238 0.99784-1.5582 0.99784-2.679 0-0.1896-0.02293-0.39172-0.05627-0.60425zm1.5068-3.7332v8.0249h4.6852v-0.98544h-3.654v-2.5457h3.2958v-0.96251h-3.2958v-2.5437h3.654v-0.98758zm11.255 0.98758v-0.98758h-5.5145v0.98758h2.2417v7.0373h1.0312v-7.0373zm4.9925-0.98758h-1.0312v8.0249h1.0312zm6.8066 0.98758v-0.98758h-5.5144v0.98758h2.2415v7.0373h1.0312v-7.0373zm10.406 0.05626c-0.79585-0.81877-1.7708-1.2229-2.9354-1.2229-1.1666 0-2.1415 0.40412-2.9374 1.2104-0.79585 0.79585-1.1874 1.7937-1.1874 2.9811s0.39159 2.1854 1.1874 2.9813c0.79585 0.80611 1.7708 1.2104 2.9374 1.2104 1.1541 0 2.1395-0.40426 2.9354-1.2104 0.79585-0.79585 1.1874-1.7938 1.1874-2.9813 0-1.177-0.39159-2.1729-1.1874-2.9686zm-5.1332 0.67078c0.59372-0.60412 1.3229-0.90624 2.1978-0.90624 0.87291 0 1.6021 0.30213 2.1854 0.90624 0.59372 0.59372 0.88531 1.3686 0.88531 2.2978 0 0.93131-0.29159 1.7041-0.88531 2.2979-0.58332 0.60412-1.3125 0.90824-2.1854 0.90824-0.87491 0-1.6041-0.30413-2.1978-0.90824-0.58132-0.60625-0.87291-1.3666-0.87291-2.2979 0-0.92918 0.29159-1.6916 0.87291-2.2978zm8.7706 1.3125-0.0437-1.548h0.0437l4.0791 6.5457h1.077v-8.0249h-1.0312v4.6957l0.0437 1.548h-0.0437l-3.8999-6.2437h-1.2562v8.0249h1.0312z" fill="#fff" stroke="#fff" stroke-miterlimit="10" stroke-width=".26666"/></svg>

But even after "I resolved the rdf error", I still cannot load icons from my SVG sprite map file.

Here is my vite configuration :

plugins: [
    ...svgSpritemap({
        pattern: path.resolve(__dirname, '../packages/assets/svg/*.svg'),
	filename: 'ps-icon-spritemap.svg',
	prefix: 'icon-ps-'
}),
...
]

Here is the way I tried to load SVG icon from the SVG sprite map:

where iconName is like ps-icon-spritemap.svg#icon-ps-Edit

使用您的插件，含有linearGradient的svg图标无法正常显示，其它图标正常

下面是我的svg，无法正常显示，能否给我一个代码示例，帮帮我

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.