Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

akar-icons-web-components

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

akar-icons-web-components

Akar icons as web components.

0.0.2
latest
npm

Version published: 3 years ago

Maintainers: 2

Created: 3 years ago

Source

AkarIcons Web Components

AkarIcons Web Components is a non-official Web Components wrapper for the amazing AkarIcons.

Also a handy icon framework for dynamically customizable icons.

Features

Framework INDEPENDENT, AkarIcons Web Components can be DIRECTLY used in ANY frameworks: React, Vue.js, you name it 🤗
With lazy loading icons, the main script weighs ~4KB, loading each uncached icon costs ~0.5KB increacement 🤩
Fully customizable, dynamically color changing is ancient, how about changing stroke-width and line-style ON THE FLY? 🤯

Read more about the design philosophies in this article! 📄

Getting Started

<script src="https://cdn.jsdelivr.net/npm/akar-icons-web-components" type="module"></script>

<body>
  <akar-icon name="bicycle">
</body>

And voilà, the icon is ready.

Play around with the CodePen.

Advanced Usage

Appetizer

Note on the top right corner of the CodePen, there is a dropdown menu. Open and have fun with it.

Value for the name field can be copied from AkarIcons homepage without the ai- prefix, eg. arrow-left

Main Course

Everything the menu changes, is simply attributes for the <akar-icon> tag.

So <akar-icon name="air" size="50"> will be rendered as a 50px ✕ 50px AkarIcons air icon.

Attributes

Attribute	Type	Css Var	Default
`name`	`string`		(Required)
`size`	`number`	`--size`	`24`
`color`	`string`	`color`	`"inherit"`
`stroke`	`number`	`--stroke`	`1`
`cap`	`enum`	`--cap`	`"round"`
`join`	`enum`	`--join`	`"round"`

Valid values for cap and join can be found here and here.

Try the following examples:

<akar-icon name="bicycle" size="50" cap="butt" join="miter"/> </akar-icon>

<akar-icon name="air" stroke="2" style="transform: scaleX(-1)"/> </akar-icon>

Or set a universal style for all <akar-icon>s:

<style>
  akar-icon {
    --cap: butt;
  }
</style>

And yes, it's that simple! 😇

Features (may be) Coming

Visual alignment adjustment configs
Framework(React, etc)-friendly wrappers
Dichromatic Icons
SVG ANIMATIONS 🤟
Use tag to reduce elements inserted into page
Use localstorage to mimic cache

Change Log

0.1/0.2 Sep 19, 2021. First commit!

Dev Preparations

git clone git@github.com:awmleer/akar-icons-web-components.git
yarn run start

Authors

卡晨 @awmleer
John @John-Theo

License

FAQs

What is akar-icons-web-components?

Is akar-icons-web-components well maintained?

Package last updated on 19 Sep 2021

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.

Install