![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
This Astro integration provides a straight-forward Icon
component for Astro.
Possibly coming soon!
First, install the astro-icon
package using your package manager. If you're using npm or aren't sure, run this in the terminal:
npm install astro-icon
Then, apply this integration to your astro.config.*
file using the integrations
property:
astro.config.mjs
import { defineConfig } from "astro/config";
import icon from "astro-icon";
export default defineConfig({
// ...
integrations: [icon()],
});
Astro Icon should be ready to go with zero config. The Icon
component is provided and allows you to inline svg
s directly into your HTML.
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.---
import { Icon } from 'astro-icon/components';
---
<!-- Loads the SVG in `/src/icons/filename.svg` -->
<Icon name="filename" />
Astro Icon also supports Iconify out-of-the-box with minimal configuration. To use an icon set from Iconify follow the instructions below:
npm i -D @iconify-json/mdi
)astro.config.mjs
fileastro.config.mjs
import { defineConfig } from "astro/config";
import icon from "astro-icon";
export default defineConfig({
// ...
integrations: [
icon({
include: {
mdi: ["*"], // Loads entire Material Design Icon set
},
}),
],
});
name
prop with (eg. mdi:account
)---
import { Icon } from 'astro-icon/components'
---
<!-- Automatically fetches and inlines Material Design Icon's "account" SVG -->
<Icon name="mdi:account" />
The Icon
component allows these custom properties:
interface Props extends HTMLAttributes<"svg"> {
/**
* References a specific Icon
*/
name: string;
title?: string;
size?: number;
width?: number;
height?: number;
}
The Icon
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.
Styling your astro-icon
is straightforward. Any styles can be targeted to the [data-icon]
attribute selector. If you want to target a specific icon, you may target it by name using [data-icon="filename"]
.
---
import { Icon } from 'astro-icon/components';
---
<style lang="css">
[data-icon] {
color: blue;
/* OR */
fill: blue;
}
[data-icon="annotation"] {
color: red;
/* OR */
fill: red;
}
</style>
<Icon name="adjustment" /> <!-- will be blue -->
<Icon name="annotation" /> <!-- will be red -->
<!-- Example using Tailwind to apply color -->
<Icon name="annotation" class="text-red-500" /> <!-- will be red-500 -->
Astro Icon can be used with other frameworks utilizing the slot
element. You can read more about how to use Slots in Astro here. Passing Children to Framework Components
The Astro Icon integration has its own options for controlling the Icon
component. Change these in the astro.config.mjs
file which is where your project's integration settings live.
If you want to use icon sets from Iconify, specify that set's name using this integration's config.include
option. To specify including an entire pack use the wildcard ['*']
. Alternatively, loading individual icons is permitted as an array of those icon names.
astro.config.mjs
import { defineConfig } from "astro/config";
import icon from "astro-icon";
export default defineConfig({
// ...
integrations: [
icon({
include: {
mdi: ["*"], // Loads entire Material Design Icon set
// or
mdi: ["account"], // Only loads the Material Design Icon's "account" SVG
},
}),
],
});
If you want to use a different custom svg icon directory instead of the default src/icons/
, specify that file path using config.iconDir
import { defineConfig } from "astro/config";
import icon from "astro-icon";
export default defineConfig({
// ...
integrations: [
icon({
iconDir: "src/images/icons",
}),
],
});
If you want to change the svgo
options instead of using the defaults, specify the options using config.svgoOptions
. Read more about the available svgo
options here
import { defineConfig } from "astro/config";
import icon from "astro-icon";
export default defineConfig({
// ...
integrations: [
icon({
svgoOptions: {
multipass: true,
plugins: [
{
name: "preset-default",
params: {
overrides: {
// customize default plugin options
inlineStyles: {
onlyMatchedOnce: false,
},
// or disable plugins
removeDoctype: false,
},
},
},
],
},
}),
],
});
TODO: Examples
TODO:
You're welcome to submit an issue or PR!
See CHANGELOG.md for a history of changes to this integration.
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.