michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

wip

Browse source
This commit is contained in:
Fred K. Schott 2021-09-14 23:13:13 -07:00
parent 49456fcb1a
commit 4ceab01d0c
5 changed files with 52 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
examples/minimal/src/pages/index.astro
View file

@ -1,4 +1,5 @@
--- ---
import {Icon} from 'astro/components';
--- ---
<html lang="en"> <html lang="en">
@ -11,6 +12,9 @@
<body> <body>
<h1>Welcome to <a href="https://astro.build/">Astro</a></h1> <h1>Welcome to <a href="https://astro.build/">Astro</a></h1>
<Icon collection="fa-solid" icon="rocket" scale={4} />
<Icon collection="fa-solid" icon="rocket" scale={4} />
<Icon collection="fa-solid" icon="rocket" scale={4} />
</body> </body>
</html> </html>

35
packages/astro/components/Icon.astro Normal file
View file

@ -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}

1
packages/astro/components/index.js
View file

@ -1,4 +1,5 @@
export { default as Code } from './Code.astro'; export { default as Code } from './Code.astro';
export { default as Debug } from './Debug.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 Markdown } from './Markdown.astro';
export { default as Prism } from './Prism.astro'; export { default as Prism } from './Prism.astro';

2
packages/astro/package.json
View file

@ -56,6 +56,8 @@
"@babel/generator": "^7.13.9", "@babel/generator": "^7.13.9",
"@babel/parser": "^7.13.15", "@babel/parser": "^7.13.15",
"@babel/traverse": "^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-postcss": "^1.4.3",
"@snowpack/plugin-sass": "^1.4.0", "@snowpack/plugin-sass": "^1.4.0",
"@types/send": "^0.17.1", "@types/send": "^0.17.1",

10
yarn.lock
View file

@ -622,6 +622,16 @@
resolved "https://registry.yarnpkg.com/@hutson/parse-repository-url/-/parse-repository-url-3.0.2.tgz#98c23c950a3d9b6c8f0daed06da6c3af06981340" resolved "https://registry.yarnpkg.com/@hutson/parse-repository-url/-/parse-repository-url-3.0.2.tgz#98c23c950a3d9b6c8f0daed06da6c3af06981340"
integrity sha512-H9XAx3hc0BQHY6l+IFSWHDySypcXsvsuLhgYLUGywmJ5pswRVQJUHpOsobnLYp2ZUaUlKiKDrgWWhosOwAEM8Q== 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": "@jsdevtools/rehype-toc@3.0.2":
version "3.0.2" version "3.0.2"
resolved "https://registry.yarnpkg.com/@jsdevtools/rehype-toc/-/rehype-toc-3.0.2.tgz#29c32e6b40cd4b5dafd96cb90d5057ac5dab4a51" resolved "https://registry.yarnpkg.com/@jsdevtools/rehype-toc/-/rehype-toc-3.0.2.tgz#29c32e6b40cd4b5dafd96cb90d5057ac5dab4a51"