You should know about xicons.org

#react #vue #javascript #webdev

For those developers like me, who are taking a lot of time trying to find good icons for your websites. I have a good news.

XICONS.ORR is the best place to get icons. They have support for framework like Vuejs 2, ReactJS, and VueJs 3.

ICONS INCLUDED IN THE PACKAGE:

FLUENT ICONS
Ionicons v4
Ionicons v5
Ant Design Icons
Fontawesome Icons
Material Icons
Tabler Icons
Carbon Icons

What I like about this package is you can install what icons you like, and its easy to integrate on your frameworks you are using.

You can also check instructions in their GITHUB REPO: https://github.com/07akioni/xicons

To install the package:

# Install packages on your demand
# For react
npm i -D @ricons/fluent
npm i -D @ricons/ionicons4
npm i -D @ricons/ionicons5
npm i -D @ricons/antd
npm i -D @ricons/material
npm i -D @ricons/fa # font awesome
npm i -D @ricons/tabler
npm i -D @ricons/carbon
# For vue3
npm i -D @vicons/fluent
npm i -D @vicons/ionicons4
npm i -D @vicons/ionicons5
npm i -D @vicons/antd
npm i -D @vicons/material
npm i -D @vicons/fa # font awesome
npm i -D @vicons/tabler
npm i -D @vicons/carbon
# For vue2
npm i -D @v2icons/fluent
npm i -D @v2icons/ionicons4
npm i -D @v2icons/ionicons5
npm i -D @v2icons/antd
npm i -D @v2icons/material
npm i -D @v2icons/fa # font awesome
npm i -D @v2icons/tabler
npm i -D @v2icons/carbon
# For SVG file
npm i -D @sicons/fluent
npm i -D @sicons/ionicons4
npm i -D @sicons/ionicons5
npm i -D @sicons/antd
npm i -D @sicons/material
npm i -D @sicons/fa # font awesome
npm i -D @sicons/tabler
npm i -D @sicons/carbon

We also need the Icon wrapper for our icons.

Icon Utils Installation
Icon utils provide a icon wrapper component for customizing color & size of the inner SVG icon.

npm i -D @ricons/utils  # react
npm i -D @vicons/utils  # vue3
npm i -D @v2icons/utils # vue2

example use for Vue 3:

<script>
  import { Money16Regular } from '@vicons/fluent'
  // or
  import Money16Regular from '@vicons/fluent/Money16Regular'

  // You can directly use the SVG component
  // or wrap it in an Icon component from @vicons/utils

  import { Icon } from '@vicons/utils'

  export default {
    components: {
      Icon,
      Money16Regular
    }
  }
</script>

<template>
  <Icon>
    <Money16Regular />
  </Icon>
</template>

example for ReactJS:

import { Money16Regular } from '@ricons/fluent'
// or
import Money16Regular from '@ricons/fluent/Money16Regular'

// You can directly use the SVG component
// or wrap it in an Icon component from @ricons/utils
import { Icon } from '@ricons/utils'

function App() {
  return (
    <Icon>
      <Money16Regular />
    </Icon>
  )
}

example for Vue 2:

<script>
  import { Money16Regular } from '@v2icons/fluent'
  // or
  import Money16Regular from '@v2icons/fluent/Money16Regular'

  // You can directly use the SVG component
  // or wrap it in an Icon component from @v2icons/utils

  import { Icon } from '@v2icons/utils'

  export default {
    components: {
      Icon,
      Money16Regular
    }
  }
</script>

<template>
  <Icon>
    <Money16Regular />
  </Icon>
</template>

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.