DEV Community: Misha Grebennikov

AlmaIcons — Modern Multi-Weight Icon Library

Misha Grebennikov — Tue, 16 Sep 2025 09:05:31 +0000

AlmaIcons is an npm package with 450+ SVG icons in multiple styles and weights, designed for modern web, mobile, and desktop interfaces.

🌐 Site: almaicons.netlify.app

Inspired by Material Design Icons and their rich variety, I wanted to bring that same flexibility into my project while keeping a unique style. That’s exactly how AlmaIcons was envisioned: similar flexibility in weights and styles, but with a distinctive visual character so the set doesn’t feel like “just another clone.”

What’s Inside

450+ icons at launch.
2 styles: outline and fill.
Weights: 100, 200, 300, 400, 500 (600 and 700 are coming later, but not all icons have variants yet).
Tree-shaking: only imports what you actually use.
TypeScript support: strict typing and autocomplete
Compatibility: works with any framework where you can use SVG.

Installation

npm install alma-icons
# or
pnpm add alma-icons
# or
yarn add alma-icons

Usage in Vue 3 (with SVG loader)

// --- Icon.vue --- //

<script setup lang="ts">
import { defineAsyncComponent, computed, markRaw } from "vue";


import { iconManifest, type IconFullName, type IconProps } from "./icon";


const props = defineProps<IconProps>();


const symbol = computed(() => {
 const { name, style, weight } = props;


 const key = `${name}_${style}_${weight}`;


 const loader = iconManifest[key as IconFullName];
 return loader ? markRaw(defineAsyncComponent(loader)) : null;
});
</script>


<template>
 <div class="icon" data-testid="icon">
   <component v-if="symbol" :is="symbol" viewBox="0 0 24 24"></component>
 </div>
</template>

And of course, don’t forget to configure the SVGloader plugin in vite.config:

// --- vite.config.ts --- //

import vue from "@vitejs/plugin-vue";
import svgLoader from "vite-svg-loader";
defineConfig({ plugins: [vue(), svgLoader({ defaultImport: "component" })]})

Usage in React (with SVG loader)

import React, { Suspense, lazy } from "react";
import { iconManifest, type IconFullName, type IconProps } from "./icon";

export const Icon: React.FC<IconProps> = ({ name, style, weight }) => {
  const key = `${name}_${style}_${weight}` as IconFullName;
  const loader = iconManifest[key];

  if (!loader) {
    return null;  }

  const Symbol = lazy(loader);

  return (
    <div className="icon" data-testid="icon">
      <Suspense fallback={null}>
        <Symbol viewBox="0 0 24 24" />
      </Suspense>
    </div>
  );
};

Configure vite.config:

import react from "@vitejs/plugin-react";
import svgLoader from "vite-svg-loader";
defineConfig({plugins: [react(), svgLoader({ defaultImport: "component" })]})

Why Do Weights Matter?

In different contexts, the same icon can look very different:

In light mode, outline icons with weight 400 look great.
In dark mode, the same icons look better with weight 300, so the lines don’t overpower the UI. Just one prop — and your whole UI feels visually cohesive.

How AlmaIcons Is Different

Inspired by Material Symbols (Google’s variable font icons) with thickness, fill, and size variations.
Implemented as SVG components, making the set universal and free from font rendering limitations.
Maintains its own style: not just another clone, but a set with personality and a unified visual language.

Why This Matters

Icons are not just graphics — they’re part of the interface language. They help users navigate faster and make interactions clearer without extra text.
If icons are inconsistent, the UI feels unfinished. AlmaIcons solves this by giving you a cohesive, consistent set out of the box.

Roadmap

Support for weights 600 and 700.
New categories (editor tools, etc.).
Figma integration (a quick plugin for designers).
Most importantly — animated icons (Lottie/Rive) with state transitions (normal → active). This will make interfaces feel more alive and responsive, without custom animations for every icon.

Final Note

AlmaIcons is about speed, consistency, and convenience.
One package, own style, variable weights, and a modern DX.

👉 Try it out: alma-icons on npm, alma-icons in Figma

Resize Bounding: Making Vue3 Components Truly Resizable ✨

Misha Grebennikov — Mon, 18 Aug 2025 09:52:03 +0000

The Challenge

When designing interfaces, I often ran into a common problem: users needed to resize elements freely, but most solutions felt clunky or rigid. I wanted something intuitive, smooth, and predictable. That’s how Resize Bounding came to life.

Why I Built It 💡

Users struggle when components ignore container boundaries.
Existing Vue3 solutions were either heavy or inflexible.
I needed a lightweight, reusable tool that I could integrate into my projects — and share with the community.

The Approach

I focused on Vue3 Composition API and pointer events to make resizing seamless across devices. Key design choices:

Reactive boundaries — Automatically calculate max/min width and height to respect parent constraints.
Customizable handles — Style them or hide them, depending on the UX.
Installation:

npm i vue3-resize-bounding

# or

yarn add vue3-resize-bounding

Examples (Vue.js)

The :directions property enables the necessary borders for resizing. The literal ‘hv’ specifies which boundaries should be enabled for resizing. The order of the characters is not significant. 'hv'is equivalent (alias) to 'tblr'

't' — top; 'r'— right; 'b'— bottom; 'l'-left; 'h'-horizontal alias, equivalent to 'lr' ; 'v'-vertical alias, equivalent to 'tb'

Simple Usage:

<!-- @filename: MyComponent.vue -->
<script setup lang="ts">
  import { ref } from "vue";
  import ResizeBounding from "vue3-resize-bounding";

  const width = ref(320);
  const height = ref(480);
</script>

<template>
  <ResizeBounding v-model:width="width" v-model:height="height" directions="hv" :min-width="100" :max-width="400">
    <div class="resizable-box">Resizable Content</div>
  </ResizeBounding>
</template>

Custom setup:

<!-- @filename: MyComponent.vue -->
<script setup lang="ts">
  import { ref } from "vue";
  import ResizeBounding from "vue3-resize-bounding";

  const container = ref({ width: 320, height: 480 });
</script>

<template>
  <ResizeBounding
    :width="container.width"
    :height="container.height"
    :min-width="240"
    :max-width="480"
    :min-height="120"
    :directions="'hv'"
    :options="{
        position: 'central',
        splitterWidthNormal: 1,
        splitterWidthActive: 4,
        knob: {
          show: true
        }
    }"
    :style="{ border: '1px solid gray' }"
    @update:width="(width) => (container.width = width)"
    @update:height="(height) => (container.height = height)"
  >
    <!-- CONTENT START -->
    <div :style="{ width: '100%', height: '100%' }">My Container</div>
    <!-- CONTENT END -->

    <!-- KNOB INNER CONTENT START -->
    <template #knob>
      <div class="some-icon"></div>
    </template>
    <!-- KNOB INNER CONTENT END -->
  </ResizeBounding>
</template>

Styling of a component can be done by directly modifying the CSS properties of global classes, or by using the styles object, which uses the [@fluentui/merge-styles](https://www.npmjs.com/package/@fluentui/merge-styles) syntax.

Using SCSS:

<style lang="scss">
  $prefix: "resize-bounding-";

  .#{$prefix} {
    &-container {
    }
    &-pane {
      /* Normal state */
      .#{$prefix}splitter {
        &--container {
        }
      }
      .#{$prefix}knob {
      }

      /* * * Default `options` settings * * */

      /* Both selected and pressed states */
      &.active {
        .#{$prefix}splitter {
        }
        .#{$prefix}knob {
        }
      }

      /* * * Separate states ({ addStateClasses: true }) * * */

      /* Normal state */
      &.normal {
        .#{$prefix}splitter {
        }
        .#{$prefix}knob {
        }
      }

      /* Focused state */
      &.focused {
        .#{$prefix}splitter {
        }
        .#{$prefix}knob {
        }
      }

      /* Pressed state */
      &.pressed {
        .#{$prefix}splitter {
        }
        .#{$prefix}knob {
        }
      }
    }
  }
</style>

Using ‘styles’ object:

<!-- @filename: MyResizeBoundingComponent.vue -->

<script lang="ts">
  import ResizeBounding, { PREFIX } from "vue3-resize-bounding";

  /* * * Default styles and classes * * */

  const options = {
    width: 4,
    activeAreaWidth: undefined,
    position: "central", // 'central' | 'internal' | 'external'
    knob: {
      show: true,
      normalHidden: true,
    },
    cursor: {
      horizontal: "col-resize",
    },
    touchActions: true,
  };

  // Below are all the default styles purely for demonstration purposes
  // In reality, you can only override the necessary properties
  const styles = (prefix: string): IStyles => ({
    container: [
      globalClassNames(prefix).container,
      { displayName: globalClassNames(prefix).container, position: "relative" },
    ],
    pane: [
      globalClassNames(prefix).pane,
      {
        displayName: globalClassNames(prefix).pane,
        position: "absolute",
        display: "block",
        zIndex: 9999,
        touchAction: "none",
      },
    ],
    splitter: [
      globalClassNames(prefix).splitter,
      {
        displayName: globalClassNames(prefix).splitter,
        position: "absolute",
        zIndex: 9999,
        transition: "background 125ms ease-out",
        [`.${globalClassNames(prefix).pane}.active &`]: {
          background: "cornflowerblue",
        },
        /* 
        Focused state:
        [`.${globalClassNames(prefix).pane}.focused &`]: {},
        Pressed state:
        [`.${globalClassNames(prefix).pane}.pressed &`]: {}
        */
      },
    ],
    splitterContainer: [
      globalClassNames(prefix).splitterContainer,
      {
        displayName: globalClassNames(prefix).splitterContainer,
        position: "relative",
        top: "50%",
        left: "50%",
        width: `0px`,
        height: `0px`,
      },
    ],
    knob: [
      globalClassNames(prefix).knob,
      {
        displayName: globalClassNames(prefix).knob,
        position: "relative",
        width: "64px",
        height: "6px",
        background: "gray",
        borderRadius: "3px",
        transform: "translate(-50%, -50%)",
        transition: "background 125ms ease-out",
        [`.${globalClassNames(prefix).pane}.active &`]: {
          background: "cornflowerblue",
        },
        /* 
        Focused state:
        [`.${globalClassNames(prefix).pane}.focused &`]: {},
        Pressed state:
        [`.${globalClassNames(prefix).pane}.pressed &`]: {}
        */
      },
    ],
  });
</script>

Detailed documentation on properties and their types is available in the README

For a clearer understanding, you can explore the Storybook documentation, where all properties are showcased with interactive examples.

What Worked ✅

Resizing feels natural and responsive, even for nested components.
Minimal code footprint, easy to integrate for developers.
Testing confirmed smooth and predictable behavior.

Lessons Learned

Handling nested elements and offsets is tricky — reactive calculations are essential.
Cross-device testing revealed subtle quirks in pointer events and CSS transitions.
Clear documentation and examples save developers’ time and frustration.

Takeaway

Resize Bounding is now a reusable Vue3 component that solves a real UX problem while remaining lightweight and flexible. It demonstrates my approach: balancing UX, performance, and developer usability.

💡 See it in action: GitHub Repo

Live Demo: resize-bounding.netlify.app
Vue3 Documentation: vue3-resize-bounding-docs.netlify.app
React Documentation: react-resize-bounding-docs.netlify.app