From 39868cf79c6262eb463b379b793d6865cec62acb Mon Sep 17 00:00:00 2001 From: Vjacheslav Trushkin Date: Thu, 22 Jun 2023 11:50:27 +0300 Subject: [PATCH] feat: support require-trusted-types-for policy --- components-demo/react-demo/index.html | 24 +++++++++------ components/react/package.json | 2 +- components/react/src/render.ts | 11 ++++--- components/svg-framework/README.md | 4 +-- components/svg-framework/demo/usage.html | 4 +++ components/svg-framework/package.json | 2 +- components/svg-framework/src/render/svg.ts | 3 +- iconify-icon/icon/README.md | 4 +-- iconify-icon/icon/demo/usage.html | 4 +++ iconify-icon/icon/package.json | 2 +- iconify-icon/icon/src/render/svg.ts | 4 ++- iconify-icon/react/package.json | 2 +- iconify-icon/solid/package.json | 2 +- packages/utils/package.json | 5 +++ packages/utils/src/index.ts | 1 + packages/utils/src/svg/inner-html.ts | 36 ++++++++++++++++++++++ 16 files changed, 85 insertions(+), 25 deletions(-) create mode 100644 packages/utils/src/svg/inner-html.ts diff --git a/components-demo/react-demo/index.html b/components-demo/react-demo/index.html index 38f3861..d4bf12a 100644 --- a/components-demo/react-demo/index.html +++ b/components-demo/react-demo/index.html @@ -1,13 +1,17 @@ - - - - - Vite App - - -
- - + + + + + + React Demo + + +
+ + diff --git a/components/react/package.json b/components/react/package.json index 7114d3b..5928b6b 100644 --- a/components/react/package.json +++ b/components/react/package.json @@ -2,7 +2,7 @@ "name": "@iconify/react", "description": "Iconify icon component for React.", "author": "Vjacheslav Trushkin", - "version": "4.1.0", + "version": "4.1.1", "license": "MIT", "bugs": "https://github.com/iconify/iconify/issues", "homepage": "https://iconify.design/", diff --git a/components/react/src/render.ts b/components/react/src/render.ts index d48d435..213c9bb 100644 --- a/components/react/src/render.ts +++ b/components/react/src/render.ts @@ -8,6 +8,7 @@ import { iconToSVG } from '@iconify/utils/lib/svg/build'; import { replaceIDs } from '@iconify/utils/lib/svg/id'; import { iconToHTML } from '@iconify/utils/lib/svg/html'; import { svgToURL } from '@iconify/utils/lib/svg/url'; +import { cleanUpInnerHTML } from '@iconify/utils/lib/svg/inner-html'; import type { IconifyIconCustomisations, IconifyRenderMode, @@ -48,7 +49,7 @@ const propsToAdd: Record = { Size: '100% 100%', }; const propsToAddTo: Record> = { - webkitMask: monotoneProps, + WebkitMask: monotoneProps, mask: monotoneProps, background: coloredProps, }; @@ -202,9 +203,11 @@ export const render = ( // Add icon stuff componentProps.dangerouslySetInnerHTML = { - __html: replaceIDs( - item.body, - id ? () => id + 'ID' + localCounter++ : 'iconifyReact' + __html: cleanUpInnerHTML( + replaceIDs( + item.body, + id ? () => id + 'ID' + localCounter++ : 'iconifyReact' + ) ), }; return React.createElement('svg', componentProps); diff --git a/components/svg-framework/README.md b/components/svg-framework/README.md index 2b7dde0..adbd93d 100644 --- a/components/svg-framework/README.md +++ b/components/svg-framework/README.md @@ -21,13 +21,13 @@ Iconify SVG framework is designed to be as easy to use as possible. Add this line to your page to load Iconify SVG framework (you can add it to `` section of the page or before ``): ```html - + ``` or ```html - + ``` or, if you are building a project with something like WebPack or Rollup, you can include the script by installing `@iconify/iconify` as a dependency and importing it in your project: diff --git a/components/svg-framework/demo/usage.html b/components/svg-framework/demo/usage.html index df66b52..f3dfd7b 100644 --- a/components/svg-framework/demo/usage.html +++ b/components/svg-framework/demo/usage.html @@ -3,6 +3,10 @@ + Iconify Demo: Usage