Начало работы

Инструкция для быстрого подключения и начала работы с библиотекой.

JavaScript

В примере ниже показано, как использовать иконки в обычном JavaScript проекте:

<div data-icon="home" />

<script>
import { createIcons, icons } from '@web-global/icons';

document.addEventListener("DOMContentLoaded", function () {
  createIcons({
    icons: icons,
  });
});
</script>

Пояснение: Инициализация иконок выполняется в обработчике события DOMContentLoaded. Это гарантирует, что DOM будет полностью загружен перед вызовом createIcons. Функция сканирует элементы с атрибутом data-icon и заменяет их на соответствующие иконки.

React

Интеграция иконок в проекте на React выполняется с помощью хука useEffect:

import React, { useEffect } from "react";
import { icons, createIcons } from "@web-global/icons";

const IconComponent = () => {
  useEffect(() => {
    createIcons({ icons });
  }, []);

  return <div data-icon="home" />;
};

export default IconComponent;

Пояснение: В этом примере иконки инициализируются в useEffect после монтирования компонента. Хук запускает createIcons, которая находит все элементы с атрибутом data-icon и заменяет их на иконки.

Vue

Для Vue инициализация иконок происходит через хук onMounted:

<template>
  <div data-icon="home" />
</template>

<script>
import { icons, createIcons } from '@web-global/icons';
import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      createIcons({ icons });
    });
  },
};
</script>

Пояснение: В этом примере функция createIcons вызывается внутри onMounted, что гарантирует, что DOM-элементы будут доступны перед инициализацией иконок.