Framework7 Icons v4

New version for Framework7 Icons has been released, and this new release contains pure SVG components for React, Svelte and Vue. So now it is possible to use F7 Icons like this:

In React:

import { House, HeartCircle } from 'framewokr7-icons/react';

export default () {
  // ...
  return (
    <div>
      <House />
      ...
      <HeartCircle>
    </div>
  )
}

In Svelte:

<div>
  ...
  <House />
  ...
  <HeartCircle>
  ...
</div>
<script>
  import { House, HeartCircle } from 'framewokr7-icons/svelte';
  // ...
</script>

In Vue:

<template>
  <div>
    ...
    <f7-house />
    ...
    <f7-heart-circle />
    ...
  </div>
</template>

<script>
  import { House, HeartCircle } from 'framewokr7-icons/svelte';

  export default {
    components: {
      f7House: House,
      f7HeartCircle: HeartCircle,
    },
    ...
  }
</script>
6 Likes

That’s really great news !

This can reduce the app size by a lot.
Is there any documentation yet or is it a simple a wrapper around an svg element like mdi ?

If that’s the case we can customize them like normal svgs right? I’m talking about color and scaling

Yep, just a simple wrapper around SVG element. They use fill="currentcolor", so it basically inherits text color, which is easy customizable

1 Like