![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
astro-icon
Advanced tools
Readme
A straight-forward Icon
component for Astro.
astro-icon
.npm i astro-icon
# or
yarn add astro-icon
astro.config.mjs
file. See Issue #2.export default {
vite: {
ssr: {
external: ["svgo"],
},
},
};
astro-icon
automatically includes all of the most common icon packs, powered by Iconify!
To browse supported icons, check the official Icon Sets reference or visit Icônes.
Icon will inline the SVG directly in your HTML.
---
import { Icon } from 'astro-icon'
---
<!-- Automatically fetches and inlines Material Design Icon's "account" SVG -->
<Icon pack="mdi" name="account" />
<!-- Equivalent shorthand -->
<Icon name="mdi:account" />
Sprite will reference the SVG from a spritesheet via <use>
.
---
import { Sprite } from 'astro-icon'
---
<!-- Required ONCE per page as a parent of any <Sprite> components! Creates `<symbol>` for each icon -->
<!-- Can also be included in your Layout component! -->
<Sprite.Provider>
<!-- Automatically fetches and inlines Material Design Icon's "account" SVG -->
<Sprite pack="mdi" name="account" />
<!-- Equivalent shorthand -->
<Sprite name="mdi:account" />
</Sprite.Provider>
You may also create Local Icon Packs.
By default, astro-icon
supports custom local svg
icons. They are optimized with svgo
automatically with no extra build step. See "A Pretty Good SVG Icon System" from CSS Tricks.
src/
named icons/
..svg
file to src/icons/
name
prop.Icon will inline the SVG directly in your HTML.
---
import { Icon } from 'astro-icon';
---
<!-- Loads the SVG in `/src/icons/filename.svg` -->
<Icon name="filename" />
Sprite will reference the SVG from a spritesheet via <use>
.
---
import { Sprite } from 'astro-icon';
---
<!-- Required ONCE per page as a parent of any <Sprite> components! Creates `<symbol>` for each icon -->
<!-- Can also be included in your Layout component! -->
<Sprite.Provider>
<!-- Uses the sprite from `/src/icons/filename.svg` -->
<Sprite name="filename" />
</Sprite.Provider>
astro-icon
supports custom local icon packs. These are also referenced with the pack
and/or name
props.
src/
named icons/
.pack
name inside of that directory, eg src/icons/my-pack.ts
createIconPack
utility to handle most common situations.import { createIconPack } from "astro-icon";
// Resolves `heroicons` dependency and reads SVG files from the `heroicons/outline` directory
export default createIconPack({ package: "heroicons", dir: "outline" });
// Resolves `name` from a remote server, like GitHub!
export default createIconPack({
url: "https://raw.githubusercontent.com/radix-ui/icons/master/packages/radix-icons/icons/",
});
If you have custom constraints, you can always create the resolver yourself. Export a default
function that resolves the name
argument to an SVG string.
import { loadMyPackSvg } from "my-pack";
export default async (name: string): Promise<string> => {
const svgString = await loadMyPackSvg(name);
return svgString;
};
Styling your astro-icon
is straightforward. Any styles can be targeted to the [astro-icon]
attribute selector. If you want to target a specific icon, you may target it by name using [astro-icon="filename"]
.
---
import { Icon } from 'astro-icon';
---
<style lang="css">
[astro-icon] {
color: blue;
/* OR */
fill: blue;
}
[astro-icon="annotation"] {
color: red;
/* OR */
fill: red;
}
</style>
<Icon name="adjustment" /> <!-- will be blue -->
<Icon name="annotation" /> <!-- will be red -->
<Icon>
and <Sprite>
share the same interface.
The name
prop references a specific icon. It is required.
The optimize
prop is a boolean. Defaults to true
. In the future it will control svgo
options.
Both components also accepts any global HTML attributes and aria
attributes. They will be forwarded to the rendered <svg>
element.
See the Props.ts
file for more details.
FAQs
This **[Astro integration](https://docs.astro.build/en/guides/integrations-guide/)** provides a straight-forward `Icon` component for [Astro](https://astro.build).
The npm package astro-icon receives a total of 30,342 weekly downloads. As such, astro-icon popularity was classified as popular.
We found that astro-icon demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.