agerix/iconify
2
0
Fork 0
mirror of https://github.com/iconify/iconify.git synced 2024-11-09 23:00:56 +00:00
Code Issues Releases Activity

Move reusable functions for using SVG in CSS to utils

Browse Source
This commit is contained in:
Vjacheslav Trushkin 2022-04-10 13:47:25 +03:00
parent b057e935b4
commit e7e51f8299
6 changed files with 62 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/iconify/src/render/bg.ts
View File

@ -1,6 +1,7 @@
import type { FullIconifyIcon } from '@iconify/utils/lib/icon';
import { iconToSVG } from '@iconify/utils/lib/svg/build';
import { iconToHTML } from '@iconify/utils/lib/svg/html';
import { svgToURL } from '@iconify/utils/lib/svg/url';
import {
elementDataProperty,
IconifyElement,
@ -74,17 +75,7 @@ export function renderBackground(
// Update style
const isMonotone = renderData.body.indexOf('currentColor') !== -1;
const url =
'url("data:image/svg+xml,' +
html
.replace(/"/g, "'")
.replace(/%/g, '%25')
.replace(/#/g, '%23')
.replace(/{/g, '%7B')
.replace(/}/g, '%7D')
.replace(/</g, '%3C')
.replace(/>/g, '%3E') +
'")';
const url = svgToURL(html);
const newStyles: Record<string, string> = {
'--svg': url,
'width': renderAttribs.width,

4
packages/utils/package.json
View File

@ -202,6 +202,10 @@
"./lib/svg/trim": {
"require": "./lib/svg/trim.cjs",
"import": "./lib/svg/trim.mjs"
},
"./lib/svg/url": {
"require": "./lib/svg/url.cjs",
"import": "./lib/svg/url.mjs"
}
},
"files": [

2
packages/utils/src/index.ts
View File

@ -42,6 +42,8 @@ export { replaceIDs } from './svg/id';
export { calculateSize } from './svg/size';
export { encodeSvgForCss } from './svg/encode-svg-for-css';
export { trimSVG } from './svg/trim';
export { iconToHTML } from './svg/html';
export { svgToURL } from './svg/url';
// Colors
export { colorKeywords } from './colors/keywords';

11
packages/utils/src/svg/encode-svg-for-css.ts
View File

@ -1,3 +1,5 @@
import { encodeSVGforURL } from './url';
/**
* Encode the `SVG` to be used on `CSS`: https://bl.ocks.org/jennyknuth/222825e315d45a738ed9d6e04c7a88d0.
*
@ -17,12 +19,5 @@ export function encodeSvgForCss(svg: string): string {
'<svg xmlns="http://www.w3.org/2000/svg" '
);
}
return useSvg
.replace(/"/g, "'")
.replace(/%/g, '%25')
.replace(/#/g, '%23')
.replace(/{/g, '%7B')
.replace(/}/g, '%7D')
.replace(/</g, '%3C')
.replace(/>/g, '%3E');
return encodeSVGforURL(useSvg);
}

29
packages/utils/src/svg/url.ts Normal file
View File

@ -0,0 +1,29 @@
/**
* Encode SVG for use in url()
*
* Short alternative to encodeURIComponent() that encodes only stuff used in SVG, generating
* smaller code.
*
* If icon is not optimised, run trimSVG() before this function to get rid of new lines.
* This function is intended to be used with Iconify icon sets, which are already optimised
* and do not contain new lines.
*/
export function encodeSVGforURL(svg: string): string {
return (
svg
.replace(/"/g, "'")
.replace(/%/g, '%25')
.replace(/#/g, '%23')
// .replace(/{/g, '%7B') // not needed in string inside double quotes
// .replace(/}/g, '%7D') // not needed in string inside double quotes
.replace(/</g, '%3C')
.replace(/>/g, '%3E')
);
}
/**
* Generate url() from SVG
*/
export function svgToURL(svg: string): string {
return 'url("data:image/svg+xml,' + encodeSVGforURL(svg) + '")';
}

22
packages/utils/tests/encode-url-test.ts Normal file
View File

@ -0,0 +1,22 @@
import { svgToURL } from '../lib/svg/url';
describe('Testing generating url()', () => {
// To make sure it works in browser, log variable `url` and test in actual CSS
test('Simple icon', () => {
const html =
'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M0 0h16v16z" fill="#f80" /></svg>';
const url = svgToURL(html);
expect(url).toBe(
"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M0 0h16v16z' fill='%23f80' /%3E%3C/svg%3E\")"
);
});
test('Icon with style', () => {
const html =
'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><style>path { fill: #f80; }</style><path d="M0 0h16v16z" /></svg>';
const url = svgToURL(html);
expect(url).toBe(
"url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cstyle%3Epath { fill: %23f80; }%3C/style%3E%3Cpath d='M0 0h16v16z' /%3E%3C/svg%3E\")"
);
});
});