diff --git a/examples/minimal/src/pages/index.astro b/examples/minimal/src/pages/index.astro index 8e9209641..722b4cd5b 100644 --- a/examples/minimal/src/pages/index.astro +++ b/examples/minimal/src/pages/index.astro @@ -1,4 +1,5 @@ --- +import {Icon} from 'astro/components'; --- @@ -11,6 +12,9 @@

Welcome to Astro

+ + + diff --git a/packages/astro/components/Icon.astro b/packages/astro/components/Icon.astro new file mode 100644 index 000000000..d2f366a8d --- /dev/null +++ b/packages/astro/components/Icon.astro @@ -0,0 +1,35 @@ +--- +import {Collection, SVG} from '@iconify/json-tools'; + +export interface Props { + collection: string; + icon: string; + scale?: number; + // iconfiy settings + inline?: boolean; + height?: string | number; + width?: string | number; + flip?: "horizontal" | "vertical" | "horizontal,vertical"; + rotate?: string; + align?: string; + color?: string; + box?: boolean; +} + +const { collection: collectionName, icon: iconName, scale = 1, ...iconifySettings} = Astro.props as Props; + +// Proof of concept: this should be cleaned up before merging +const collection = new Collection(); +collection.loadIconifyCollection(collectionName); +const iconData = collection.getIconData(iconName); +if (!iconData) { + throw new Error(`Icon ${collectionName}:${iconName} not found.`); +} +const svg = new SVG(iconData) +const html: string = svg.getSVG({ + height: `${scale}em`, + width: `${scale}em`, + ...iconifySettings, +}); +--- +{html} diff --git a/packages/astro/components/index.js b/packages/astro/components/index.js index 8b19c7d1f..2b6a23645 100644 --- a/packages/astro/components/index.js +++ b/packages/astro/components/index.js @@ -1,4 +1,5 @@ export { default as Code } from './Code.astro'; export { default as Debug } from './Debug.astro'; +export { default as Icon } from './Icon.astro'; export { default as Markdown } from './Markdown.astro'; export { default as Prism } from './Prism.astro'; diff --git a/packages/astro/package.json b/packages/astro/package.json index 567f5c13e..30b374a25 100644 --- a/packages/astro/package.json +++ b/packages/astro/package.json @@ -56,6 +56,8 @@ "@babel/generator": "^7.13.9", "@babel/parser": "^7.13.15", "@babel/traverse": "^7.13.15", + "@iconify/json": "^1.1.401", + "@iconify/json-tools": "^1.0.10", "@snowpack/plugin-postcss": "^1.4.3", "@snowpack/plugin-sass": "^1.4.0", "@types/send": "^0.17.1", diff --git a/yarn.lock b/yarn.lock index 323765a93..0e6f727f7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -622,6 +622,16 @@ resolved "https://registry.yarnpkg.com/@hutson/parse-repository-url/-/parse-repository-url-3.0.2.tgz#98c23c950a3d9b6c8f0daed06da6c3af06981340" integrity sha512-H9XAx3hc0BQHY6l+IFSWHDySypcXsvsuLhgYLUGywmJ5pswRVQJUHpOsobnLYp2ZUaUlKiKDrgWWhosOwAEM8Q== +"@iconify/json-tools@^1.0.10": + version "1.0.10" + resolved "https://registry.yarnpkg.com/@iconify/json-tools/-/json-tools-1.0.10.tgz#d9a7050dbbe8bb29d684d4b3f9446ed2d0bea3cc" + integrity sha512-LFelJDOLZ6JHlmlAkgrvmcu4hpNPB91KYcr4f60D/exzU1eNOb4/KCVHIydGHIQFaOacIOD+Xy+B7P1z812cZg== + +"@iconify/json@^1.1.401": + version "1.1.401" + resolved "https://registry.yarnpkg.com/@iconify/json/-/json-1.1.401.tgz#bc1eeef1fb7f59eac7c0d220139d995b6035036b" + integrity sha512-h2Ia0ode2yhft4/I//HAuuhZEiQr9JgEBqOTlE2U2hFoeZXx6sCJLu561GEomK4gKuZ5I0tHWJYTBfF0+Kcz4w== + "@jsdevtools/rehype-toc@3.0.2": version "3.0.2" resolved "https://registry.yarnpkg.com/@jsdevtools/rehype-toc/-/rehype-toc-3.0.2.tgz#29c32e6b40cd4b5dafd96cb90d5057ac5dab4a51"