@cyberalien/svelte-test
Advanced tools
Iconify for Svelte is not yet another icon component! There are many of them already.
Iconify is the most versatile icon framework.
For more information visit https://iconify.design/.
Iconify for Svelte is a part of Iconify framework that makes it easy to use many icon libraries with Svelte.
Iconify for Svelte features:
If you are using NPM:
npm install --save-dev @iconify/svelte
If you are using Yarn:
yarn add --dev @iconify/svelte
This package does not include icons. Icons are split into separate packages that available at NPM. See below.
Install @iconify/svelte and packages for selected icon sets. Import component from @iconify/svelte and icon data for the icon you want to use:
import IconifyIcon from '@iconify/svelte';
import home from '@iconify/icons-mdi/home';
import faceWithMonocle from '@iconify/icons-twemoji/face-with-monocle';
Then use component with icon data as "icon" parameter:
<IconifyIcon icon={home} />
<p>This is some text with <IconifyIcon icon={faceWithMonocle} inline={true} /></p>
icon attribute is mandatory. It tells component what icon to render. If the attribute value is invalid, the component will render an empty icon. The value must be an object containing the icon data.
The icon component has the following optional attributes:
inline. Changes icon behaviour to match icon fonts. See "Inline icon" section below.width and height. Icon dimensions. The default values are "1em" for both. See "Dimensions" section below.color. Icon colour. This is the same as setting colour in style. See "Icon colour" section below.flip, hFlip, vFlip. Flip icon horizontally and/or vertically. See "Transformations" section below.rotate. Rotate icon by 90, 180 or 270 degrees. See "Transformations" section below.align, vAlign, hAlign, slice. Icon alignment. See "Alignment" section below.In addition to the attributes mentioned above, the icon component accepts any other attributes. All other attributes will be passed to generated SVG element, so you can do stuff like setting the inline style, add title and so on.
In Svelte it is not possible to pass events to child components, so Icon component does not handle any events. If you need to make icon clickable, wrap it in a button or link and assign an event to that button or link.
By default, icon height is "1em". With is dynamic, calculated using the icon's width to height ratio.
There are several ways to change icon dimensions:
font-size in style.width and/or height attribute.Values for width and height can be numbers or strings.
If you set only one dimension, another dimension will be calculated using the icon's width to height ratio. For example, if the icon size is 16 x 24, you set the height to 48, the width will be set to 32. Calculations work not only with numbers, but also with string values.
You can use numbers for width and height.
<IconifyIcon icon={homeIcon} height={24} />
<IconifyIcon icon={homeIcon} width={16} height={16} />
Number values are treated as pixels. That means in examples above, values are identical to "24px" and "16px".
If you use strings without units, they are treated the same as numbers in an example above.
<IconifyIcon icon={homeIcon} height="24" />
You can use units in width and height values:
<IconifyIcon icon={homeIcon} height="2em" />
Be careful when using calc, view port based units or percentages. In SVG element they might not behave the way you expect them to behave and when using such units, you should consider settings both width and height.
Keyword "auto" sets dimensions to the icon's viewBox dimensions. For example, for 24 x 24 icon using height="auto" sets height to 24 pixels.
<IconifyIcon icon={homeIcon} height="auto" />
There are two types of icons: icons that do not have a palette and icons that do have a palette.
Icons that do have a palette, such as emojis, cannot be customised. Setting colour to such icons will not change anything.
Icons that do not have a palette can be customised. By default, colour is set to "currentColor", which means the icon's colour matches text colour. To change the colour you can:
color style or use stylesheet to target icon. If you are using the stylesheet, target svg element. If you are using scoped style, use :global(svg) to target svg element.color attribute.Examples:
Using color attribute:
<IconifyIcon icon={alertIcon} color="red" />
<IconifyIcon icon={alertIcon} color="#f00" />
Using inline style:
<Icon icon={alertIcon} style="color: red;" />
<Icon icon={alertIcon} style="color: #f00;" />
Using stylesheet:
<Icon icon={alertIcon} class="red-icon" />
.red-icon {
color: red;
}
Using Svelte scoped style:
<script>
import IconifyIcon from '@iconify/svelte';
import alertIcon from '@iconify/icons-mdi/alert';
</script>
<style>
div :global(.red-icon) {
color: red;
}
</style>
<div>
<IconifyIcon icon={alertIcon} class="red-icon" />
</div>
You can rotate and flip the icon.
This might seem redundant because icon can also be rotated and flipped using CSS transformations. So why do transformation attributes exist? Because it is a different type of transformation.
If you have a square icon, this makes no difference. However, if you have an icon that has different width and height values, it makes a huge difference.
Rotating 16x24 icon by 90 degrees results in:
TODO: show visual example
There are several attributes available to flip an icon:
hFlip: boolean attribute, flips icon horizontally.vFlip: boolean attribute, flips icon vertically.flip: shorthand string attribute, can flip icon horizontally and/or vertically.Examples:
Flip an icon horizontally:
<IconifyIcon icon={alertIcon} hFlip={true} />
<IconifyIcon icon={alertIcon} flip="horizontal" />
Flip an icon vertically:
<IconifyIcon icon={alertIcon} vFlip={true} />
<IconifyIcon icon={alertIcon} flip="vertical" />
Flip an icon horizontally and vertically (the same as 180 degrees rotation):
<IconifyIcon icon={alertIcon} hFlip={true} vFlip={true} />
<IconifyIcon icon={alertIcon} flip="horizontal,vertical" />
An icon can be rotated by 90, 180 and 270 degrees. Only contents of the icon are rotated.
To rotate an icon, use rotate attribute. Value can be a string (degrees or percentages) or a number.
Number values are 1 for 90 degrees, 2 for 180 degrees, 3 for 270 degrees.
Examples of 90 degrees rotation:
<IconifyIcon icon={alertIcon} rotate={1} />
<IconifyIcon icon={alertIcon} rotate="90deg" />
<IconifyIcon icon={alertIcon} rotate="25%" />
Alignment matters only if you set the icon's width and height attributes that do not match the viewBox with and height.
For example, if the icon is 24x24 and you set the width to 32 and height to 24. You must set both width and height attributes for this to happen or use stylesheet to set both icon's width and height.
When you use incorrect width/height ratio for other images, browser stretches those images.
Unlike other images, SVG elements do not stretch. Instead, browser either adds space on sides of the icon (this is the default behaviour) or crops part of the icon.
You can control the behaviour of SVG when using incorrect width/height ratio by setting alignment attributes:
hAlign: string attribute to set horizontal alignment. Possible values are "left", "center" and "right".vAlign: string attribute to set vertical alignment. Possible values are "top", "middle" and "bottom".slice: boolean attribute. See below.align: shorthand string attribute. Value is the combination of vertical alignment values, horizontal alignment values, "meet" (same as slice={false}) and "slice" (same as slice={true}) separated by comma.Example of aligning an icon to the left if icon is not square:
<IconifyIcon icon={alertIcon} width="1em" height="1em" hAlign="left" />
Slice attribute tells the browser how to deal with extra space.
By default, slice is disabled. The browser will scale the icon to fit the bounding box.
Example showing the icon behaviour when slice is disabled with various alignment values:
If slice is enabled, the browser will scale the icon to fill the bounding box and hide parts that do not fit.
Example showing the icon behaviour when slice is enabled with various alignment values:
The icon component renders SVG elements. By default, SVG behave like images, which is different from icon fonts.
Many developers are used to working with icon fonts. Icon fonts render icons as text, not as images. Browsers align text differently than images:
By adding inline attribute, icon behaves like text. In inline mode icon has vertical alignment set to "-0.125em". That puts icon just below baseline, similar to icon fonts.
Example:
<IconifyIcon icon={alertIcon} inline={true} />
Visual example to show the difference between inline and block modes:
The icon component works with Sapper.
If you use the component as shown in examples above, SVG will be rendered on the server and sent to visitor as HTML code.
If you are rendering multiple identical icons, rendering them on server is not optimal. It is much better to render them once using JavaScript in browser. How to do that with this icon component? By loading both component and icon data asynchronously.
Example:
<script>
// Dynamically load icon component, icon data and render it on client side
import { onMount } from 'svelte';
let IconifyIcon;
let postIcon;
onMount(async () => {
const promises = [
import('@iconify/svelte'), // Component
import('@iconify/icons-bi/link-45deg'), // Icon #1
];
const results = await Promise.all(promises);
IconifyIcon = results[0].default; // Component
postIcon = results[1].default; // Icon #1
});
export let posts;
</script>
<ul>
{#each posts as post}
<li>
<svelte:component this={IconifyIcon} icon={postIcon} />
<a rel="prefetch" href="blog/{post.slug}">{post.title}</a>
</li>
{/each}
</ul>
This example adds an icon stored in postIcon to every list item. If it was rendered on the server, HTML would send SVG element multiple times. But because it is rendered in the browser, icon data and component needs to be sent to the browser only once.
Instead of using <IconifyIcon />, you must use <svelte:component /> to make sure component is rendered dynamically.
This example is based on the Iconify Sapper demo: https://github.com/iconify/iconify/blob/master/packages/sapper-demo/src/routes/blog/index.svelte
You can find all available icons at https://iconify.design/icon-sets/
Browse or search icons, click any icon and you will see a "Svelte" tab that will give you exact code for the Svelte component.
Import format for each icon is "@iconify/icon-{prefix}/{icon}" where {prefix} is collection prefix, and {icon} is the icon name.
Usage examples for a few popular icon sets:
Package: https://www.npmjs.com/package/@iconify/icons-bi
Icons list: https://iconify.design/icon-sets/bi/
Installation:
npm install --save-dev @iconify/icons-bi
Usage:
<script>
import IconifyIcon from '@iconify/svelte';
import awardIcon from '@iconify/icons-bi/award';
function handleClick() {
alert('Award link clicked!');
}
</script>
<a
href="# "
on:click|preventDefault="{handleClick}"
>
<IconifyIcon icon={awardIcon} />
</a>
Package: https://www.npmjs.com/package/@iconify/icons-ri
Icons list: https://iconify.design/icon-sets/ri/
Installation:
npm install --save-dev @iconify/icons-ri
Usage:
<script>
import IconifyIcon from '@iconify/svelte';
import alertLine from '@iconify/icons-ri/alert-line';
</script>
<style>
.alert {
position: relative;
margin: 8px;
padding: 16px;
padding-left: 48px;
background: #ba3329;
color: #fff;
border-radius: 5px;
float: left;
}
.alert + div {
clear: both;
}
.alert :global(svg) {
position: absolute;
left: 12px;
top: 50%;
font-size: 24px;
line-height: 1em;
margin: -0.5em 0 0;
}
</style>
<div class="alert">
<IconifyIcon icon="{alertLine}" />
Important notice with alert icon!
</div>
Package: https://www.npmjs.com/package/@iconify/icons-simple-icons
Icons list: https://iconify.design/icon-sets/simple-icons/
Installation:
npm install --save-dev @iconify/icons-simple-icons
Usage (in this example using string syntax):
<script>
import IconifyIcon from '@iconify/svelte';
import mozillafirefoxIcon from '@iconify/icons-simple-icons/mozillafirefox';
</script>
<p>
Mozilla Firefox <IconifyIcon icon={mozillafirefoxIcon} inline={true} /> is the
best browser!
</p>
There are over 60 icon sets. This readme shows only a few examples. See Iconify icon sets for a full list of available icon sets. Click any icon to see code.
The Svelte component is released with MIT license.
© 2020 Iconify OÜ
See Iconify icon sets page for list of collections and their licenses.
FAQs
Iconify icon component for Svelte.
The npm package @cyberalien/svelte-test receives a total of 0 weekly downloads. As such, @cyberalien/svelte-test popularity was classified as not popular.
We found that @cyberalien/svelte-test demonstrated a not healthy version release cadence and project activity because the last version was released 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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.