Blog

Appleseed for Laravel

Reasoning

Eliminate error and server log entries that get thrown by missing favicons, especially the apple-touch-icon.png errors.

Considerations

If you are seeing errors in your server logs, its for a reason: favicons are custom representations of your site, and its probably good to implemented them. This just provides a better user experience for the various devices and browsers that want them.

However, there are times when we just don’t want to deal with this, and are spinning up in-house or small experimental projects that won’t be used publicly like that. That’s what this package is for. Simply add it via composer, and add middleware entry as describe below, and it will return 404s for the missing favicons without cluttering your logs.

Dependencies

Your project should be running Laravel 5+.

Installation

Install Laravel Appleseed via composer:

composer require genealabs/laravel-appleseed

Add the middleware entry in app/Http/Kernel.php directly after the maintenance mode middleware:

/*
    protected $middleware = [
        \Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode::class,
*/
        \GeneaLabs\LaravelAppleseed\Http\Middleware\FaviconInterceptor::class,
/*
        [...]
    ];
*/

Usage

That was it! It will inspect each route for favicon requests and handle it appropriately.

Credits

Jesse Leite (@jesseleite85) provided lots of ideas and input on making this happen. Thanks!

Sobre o Projeto

O Waymaker é um projeto pessoal sobre aplicativos direcionado aos usuários de transporte público(usuários frequentes ou esporádicos). Tal iniciativa teve na minha experiência como usuário desse mesmo sistema o ponto de partida para o projeto. A ideação do projeto começou a partir do principal questionamento, “Como uma pessoa que desconhece um determinado local é capaz de se locomover por ele?”. Assim foi feita uma breve pesquisa com alguns usuários utilizando-se de técnicas de UX como, entrevistas, questionário, Análise de Benchmarking e testes de usabilidade para, assim, projetar uma arquitetura visual mais eficiente na transmissão de informação aos usuários e que atende de fato as suas demandas.

Um pouco sobre a identidade visual do aplicativo => Link

Protótipo => Link

If you would like to check the UX process go to this link –> Breve 😀

This is a personal project about mobile aplications for public transport. I had my own experience, as a user, to kick start the project. It all started from the main questioning,”How can a person who is unaware of a certain location capable of getting around it?”. So a brief research with users took place based on UX Designig process to design a more efficient visual architecture to communicate to users all information that actually meets their demands.

Processo

Passo – Pesquisa exploratória
Passo – Análise de Benchmark
Passo – Personas e Definição de requisitos

Interface de usuário

A partir da elaboração da relação de objetivos de usuários foi feito o fluxo de telas em baixa fidelidade, a construção de um protótipo inicial o qual foi submetido a alguns testes com usuário e a partir das informações coletadas foram implementadas novas alterações e novos testes subsequentes. Esse é o resultado obtido até o momento.

Principais Contribuições

Uma das principais contribuições foi o redesign da informação das telas de rotas disponíveis e direções, onde por meio de uma estrutura formal de um diagrama de processo. Dessa forma a numeração reforça a ideia de escolhas disponíveis(quantidade) e a sucessão de estágios de um processo(direção). A aplicação de cores como uma camada de informação reforçando os diferentes estágios da viagem. Todas essas estratégias têm como objetivo tornar mais clara e intuitiva a navegação do usuário pelas informações. A possibilidade de compartilhar localização e construir rotas personalizadas ajuda a reduzir a chance dos usuários se perderem ao desenvolver novos trajetos, pois se trata de uma fonte de informação confiável.

Implementação

NgxTesting

Testing utilities for Angular projects

npm install -D @orchestrator/ngx-testing@next

Why?

Because you want to test your code and not writing testing code to test your code.

How?

This utility library will generate a wrapping (host) component for your component under test and bind all the @Inputs and @Outputs for you so you can interact with component as the consumer will.

That also means that you do not need to worry about life-cycle hooks hassle because auto generated code will move this bit to Angular itself.

Getting started

Configuring mocking (Optional)

Library will initialize every @Output property on host component to a mock so you have a nice time checking if the output was triggered.

By default it is simply a NOOP function (that does nothing).

But which testing tool do you use is up to you so you have to tell us what to use by writing next code in your main test configuration file:

import { setOutputMock } from '@orchestrator/ngx-testing';

// Use this for Jasmine Spies
setOutputMock(() => jasmine.createSpy());

// Or this for Jest Mocks
setOutputMock(() => jest.fn());

// Optionally you can provide typings for mocks
declare module '@orchestrator/ngx-testing' {
  // Use this for Jasmine Spies
  interface OutputMock<T> extends jasmine.Spy {}

  // Or this for Jest Mocks
  interface OutputMock<T> extends jest.Mock {}
  // <T> here represents actual type from `EventEmitter<T>`
  // You can use it if you need it
}

Testing component

Let’s see how to test a component with this library:

import { TestBed } from '@angular/core/testing';
import { getTestingForComponent } from '@orchestrator/ngx-testing';

// This is component under test
@Component({ selector: 'my-component', template: 'Text is: {{text}}' })
class MyComponent implements OnInit, OnChanges {
  @Input() text: string;
}

describe('MyComponent', () => {
  // This will generate host component and module with everything required
  const { testModule, createComponent } = getTestingForComponent(MyComponent);

  // Configure testing module by importing generated module before
  beforeEach(() => TestBed.configureTestingModule({ imports: [testModule] }));

  it('should render input text', async () => {
    // Now simply create host component
    // It is async because it performs compilation of templates
    // And returns a special Host service that contains a bunch of useful stuff
    const host = await createComponent();

    // To interact with your component Inputs/Outputs use `hostComponent` property
    // It's an instance of generated host component that binds all Inputs and Outputs
    host.hostComponent.text = 'something';
    // This is an alias to fixture.detectChanges()
    // Fixture can be used as well and is available as `fixture` property
    host.detectChanges();

    // htmlElement is simply an HTMLElement of rendered component under test
    expect(host.htmlElement.textContent).toBe(`Text is: something`);
  });
});

For more examples visit example-component.spec.ts.

Providing custom config for NgModule

Sometimes you will need to provide extra config for your component/directive under test so it can work in isolated unit test. You can do this like so:

import { getTestingForComponent, getTestingForDirective } from '@orchestrator/ngx-testing';

// For component
getTestingForComponent(YourComponent, { ngModule: { imports: [...], providers: [...] } });

// For directive
getTestingForDirective(YourDirective, { ngModule: { imports: [...], providers: [...] } });

NOTE: ngModule prop in second argument is default config for @NgModule.

Initial Inputs

You can set initial inputs to component when creating it:

const host = createComponent({ prop1: 'value', prop2: 'value2' });

Also while setting initial inputs you may trigger Change Detection so that the view will immediately render with the inputs:

const host = createComponent({ ...inputs }, true);

Setting Inputs

During test you may set inputs using utility method setInputs():

host.setInputs({ prop1: 'value1', prop2: 'value2' });

Also while setting inputs you may trigger Change Detection so that the view will immediately render with the inputs:

host.setInputs({ ...inputs }, true);

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

Akka (Cluster) Management

The Akka family of projects is managed by teams at Lightbend with help from the community.

This repository contains interfaces to inspect, interact and manage various Parts of Akka, primarily Akka Cluster.
Future additions may extend these concepts to other parts of Akka.

Documentation

See reference and API

Contributions & Maintainers

This project does not have contributors, it only has maintainers—frequent and infrequent—and everyone helps out.
We love new maintainers as well as old maintainers. 🙂
The Akka core team keeps an eye on the project to assure its overall coherence but does not fully support these modules.

Contributions are very welcome, see CONTRIBUTING.md or skim existing tickets to see where you could help out.

Project Status

With the exception of the community maintained modules listed below version 1.0.0 or later of this library
is ready to be used in production, APIs are stable, and the Lightbend subscription covers support for these modules.

The following modules are maintained by the community and does not have to obey the rule of staying binary compatible
between releases. Breaking API changes may be introduced without notice as we refine and simplify based on feedback.
A module may be dropped in any release without prior deprecation. The Lightbend subscription does not cover support
for the following modules.

akka-discovery-aws-api
akka-discovery-aws-api-async
akka-discovery-marathon-api (End of Life)

License

Akka is licensed under the Business Source License 1.1, please see the Akka License FAQ.

Tests and documentation are under a separate license, see the LICENSE file in each documentation and test root directory for details.

OpenLeetCode – An open source version of LeetCode

Welcome to the OpenLeetCode Project!

The motivation behind this project is to be able to practice LeetCode problems on a plane without requiring an internet connection (until Starlink ramps up). This project is not intended to replace or replicate leetcode.com.

Table of Content

OpenLeetCode – An open source version of LeetCode
Table of Content
Screenshot
Build
- Windows
  - Building without UI
  - Building with UI
- Unix
  - Building without UI
  - Building with UI
Run
- Windows
  - CLI
  - UI
  - CLI
  - UI
How To Use
List of LeetCode Problems
Usage
Note
Requirements – Additional Requirements for the UI
Contributing

Screenshot

Build

Windows

Building without UI

git clone https://github.com/mbucko/openleetcode
cd openleetcode
.\install --prefix=./install

Building with UI

git clone https://github.com/mbucko/openleetcode
cd openleetcode
.\install --prefix=./install --enable_ui

Unix

Building without UI

git clone https://github.com/mbucko/openleetcode
cd openleetcode
./install.sh --prefix=./install

Building with UI

git clone https://github.com/mbucko/openleetcode
cd openleetcode
./install.sh --prefix=./install --enable_ui

Run

Windows

CLI

dir install/OpenLeetCode
./openleetcode --language cpp --problem TwoSum

UI

dir install/OpenLeetCode
./openleetcodeui

Unix

CLI

cd install/OpenLeetCode
./openleetcode.sh --language cpp --problem TwoSum

UI

cd install/OpenLeetCode
./openleetcodeui.sh

NOTE: UI for unix is yet to be tested.

How To Use

After the build succeeds, the following directory structure will be generated:

problems
- NumberOfIslands
  - cpp
    - solution.cpp
    - …
  - testcases
    - TestCase1.test
    - TestCase2.test
    - …
  - description.md
- TwoSum
  - ..
launguage
- cpp

Just like for LeetCode, you have one file where you solve the problem. For example, the problem called TwoSum has problems/TwoSum/cpp/solution.cpp. To add new test cases, you can create a file in the problems/TwoSum/testcases/ directory with the file extension .test, and the solution will automatically be tested against it.

Each problem is described in the description.md file location in the problem’s directory. For example problems/TwoSum/description.md.

The format of the .test files are as follows:

<arg1>
<arg2>
<expected results>

The supported types are: integral type, a string, TreeNode structure, boolean or an array. For example:

["1", "2", "4"]
8.0
[0, 0]

A ThreeNode structure is represented in an array-based structure. For example an array representation [1, 2, null, null, 3] results to the following structure:

  1
 / \
2   3

List of LeetCode Problems

TwoSum
LongestSubstringWithoutRepeatingCharacters
NumberOfIslands
CheckCompletenessOfABinaryTree

The problem names are automatically extracted from the problems folder.

Usage

$ python openleetcode.py --help
usage: openleetcode.py [-h] [--language {cpp}] [--list-problems] [--list-testcases] [--problem problem_name] [--problem_builds_dir dir] [--testcase testcase_name] [--verbose]

OpenLeetCode problem builder. This script builds and tests LeetCode-like problems locally. Currently, it only supports the C++ language, but it can be extended to support other languages.

options:
  -h, --help            show this help message and exit
  --language {cpp}, -l {cpp}
                        The programming language.
  --list-problems       List problems.
  --list-testcases      List testcases for a problem specified with '--problem' option.
  --problem problem_name, -p problem_name
                        Name of the problem to build and test. Default: TwoSum. Use --list-problems to list all problems.
  --problem_builds_dir dir, -d dir
                        Specifies the directory with the problems. Typically, this is './problem_builds'. If not provided, the script defaults to './problem_builds' in the same directory as the executable.
  --run-expected-tests, -r
                        Run the expected solution. Default: False.
  --testcase testcase_name, -t testcase_name
                        Name of the testcase to run. '--testcase All' will run all testcases. Default: All.
  --verbose, -v         Print verbose output

Note

Curently only C++ is supported but the framework is setup such that other languages can be added.

Requirements

This project requires the following to run:

Python
CMake 3.12
Git

Additional Requirements for the UI

npm

Contributing

Feel free to contribute with code, test cases, or even code reviews.

For a more in-depth guide on how to contribute and information about the inner workings of OpenLeetCode, please refer to the Docs. You can also join our Discord chat if you have any questions about the usage or development.

WebSocket Token Streaming Application

This project demonstrates a streaming application using FastAPI, Spring Boot, and React with WebSockets. The user sends a message from the frontend, which Spring Boot receives. Spring Boot checks the message in messages.txt, retrieves the corresponding ID, and sends the ID to FastAPI. FastAPI checks responses.txt for the received ID and sends the corresponding response back to Spring Boot. Spring Boot then streams the response letter by letter to React, which displays it to the user.

Project Structure

websocket-token-streaming/
├── backend/
│   ├── springboot/
│   │   ├── src/
│   │   │   ├── main/
│   │   │   │   ├── java/com/example/websocket/
│   │   │   │   │   ├── WebSocketHandler.java
│   │   │   │   │   ├── Application.java
│   │   │   │   │   ├── WebSocketConfig.java
│   │   │   │   │   ├── config/
│   │   │   │   │   │   └── WebConfig.java
│   │   │   │   └── resources/
│   │   │   │       ├── messages.txt
│   │   ├── pom.xml
│   └── fastapi/
│       ├── main.py
│       ├── responses.txt
│       ├── requirements.txt
├── frontend/
│   ├── websocket-client/
│   │   ├── src/
│   │   │   ├── App.js
│   │   │   ├── App.css
│   │   │   ├── index.js
│   │   │   ├── index.css
│   │   ├── public/
│   │   │   └── index.html
│   ├── package.json
│   ├── package-lock.json
├── README.md

Features

WebSocket Communication: Real-time communication between frontend and backend using WebSockets.
Message ID Lookup: Spring Boot looks up message IDs from messages.txt.
Response Retrieval: FastAPI retrieves responses based on IDs from responses.txt.
Letter by Letter Streaming: Responses are streamed letter by letter to the frontend.

5.React Frontend: Interactive user interface to send messages and display responses.

Prerequisites

Java Development Kit (JDK)

Python 3.7+

Node.js and npm

Usage

Open the React app in your browser at http://localhost:3000.
Type a message in the input field and press Enter or click the Send button.
The response will be displayed letter by letter in real-time.

File Overview

Backend

Spring Boot

WebSocketHandler.java: Handles WebSocket connections and message processing.

messages.txt: Contains predefined messages with corresponding IDs.

FastAPI

main.py: FastAPI server handling WebSocket connections and message processing.

responses.txt: Contains responses mapped to message IDs.

Frontend

React App

App.js: Main React component handling user input, WebSocket communication, and displaying responses.

index.html: HTML template for the React app.

License

This project is licensed under the MIT License.

Cú pháp câu lệnh: python3 anoddos.py [-h] [--target <URL>] [--method <HTTP>] [--time <time>] [--threads <threads>]

Trong đó

-h hay –help : hiển thị mục help của overload

–target <URL> : mục tiêu mà bạn muốn nhắm tới

–method <HTTP> : kiểu tấn công

–time <giây> : Thời gian chạy tool

— thread <luồng> : số luồng trên giây <tối đa 200>

Ví dụ

python3 anoddos.py --target vietnamconghoa.us --method HTTP --time 500 --thread 200

Trong câu lệnh vừa rồi mình sử dụng Max thread xem web mình còn sống không và sau đây là kết quả

Nhờ vậy mà mình biết là website của mình khá là dễ chết. Sau đây là cách để phòng chống các cuộc tấn công từ chối dịch vụ

Các cách để phòng chống DDOS / DOS Biện pháp kĩ thuật Tăng cường khả năng xử lí hệ thống Tối ưu hóa thuật toán Nâng cấp máy chủ Nâng cấp băng thông Cài đặt đầy đủ các bản vá lỗi từ server Sử dụng tường lửa Công cụ phòng chống DDOS Dùng hệ thống thiết bị, phần mềm hoặc dịch vụ giám sát an toàn mạng Dùng thiết bị bảo vệ mạng có dịch vụ chống tấn công DDoS Tường lửa cứng hoặc tường lửa mềm

frontful-environment is packaged provider of environment setup, scripts and developer utilities for server and browser Javascript application development. It’s environment setup provider for Frontful infrastructure.
Reference integration can be found in frontful-todomvc application.

Configuration of modern javascript applications using Babel and Webpack can be fun and exciting, it can also be time consuming and somewhat overwhelming. frontful-environment is packaged abstraction on top of Babel, Webpack and other great tools to provide simple yet configurable environment setup with essential features, good developer experience, abstraction and isolation. frontful-environment can streamline application development environment setup and help to focus on feature implementation instead of Javascript DevOps.

Conceptually frontful-environment is similar to react-scripts in react-create-app. Difference lyes in that frontful-environment focuses not only on build for browser but also server, this results in core infrastructure for developing isomorphic applications, different feature set and mechanics.

Features

ES6+ environment with ES Modules
Cold reload with state persistence and no HMR
- Live reload on both server and browser code changes
- JS, CSS and other imported resources are reloaded
- Support for live reload of linked package changes
- No separate server, no server restarts
Server and browser code is built into bundles
- Server bundle excludes node_modules
- Browser bundle is tree shakeable
- Browser node_modules are placed into vendor bundle
- Build is stored in memory for development by default
Isomorphic resource handling
Importing SVG as JSX React component
Multiple CSS styling approaches
- CSS, SCSS and SASS
- CSS Modules
- Integrated autoprefixer
Environment configuration
Production build
Utilities
- Linter
- Source maps
- Error parsing

Mechanics

frontful-environment consists of two aspects

Script – Script is installed under node_modules/.bin as frontful-environment and provides two variation
- frontful-environment start – Starts application for development with live cold reload and package development assist. Utilities are working in NODE_ENV=development mode e.g. cold reload state persistence and error handling. Babel and Webpack are building server and browser bundles (in memory by default), these bundles get rebuilt and reloaded when code is changed.
- frontful-environment build – Builds application for production and outputs optimized server and browser bundles to ./build folder. To run production build execute PORT=8000 node ./build/server. Babel and Webpack are working only during build process, when application is run Babel and Webpack are not triggered. Certain utilities are disabled or working in NODE_ENV=production mode e.g. cold reload state persistence and error handling
Utilities – Provides utilities to access and use certain aspects of frontful-environment. To use these utilities import environment from 'frontful-environment'.
- environment.assets – Get bundle absolute mount path e.g. js.main, js.vendor, css.main, css.vendor.
- environment.coldreload – Utilities for setting serializer and deserializer handlers and accessing persisted state
- environment.error – Utilities for error parser() and getHandler() Express.js style error handler middleware.
- environment.server – Get current http server instance
- environment.listener – Get current http server listener instance

Installation

# Using yarn
yarn add frontful-environment
# or npm
npm install -s frontful-environment

Integration

By default frontful-environment has only one assumption/requirement, that you have two entry points to your applications

./src/browser/index.js – Entry point for browser bundle
./src/server/index.js – Entry point for server bundle. Server entry must exports http request handler or Express.js style application instance.

To change default entry point file names read section on Configuration.

Add start and build scripts to package.json

// package.json
{
  "scripts": {
    "build": "frontful-environment build",
    "start": "frontful-environment start"
  }
}

Ensure that entry point file for browser exists e.g. ./src/browser/index.js.

Ensure that entry point file for server exists e.g. ./src/server/index.js and that it exports http server request handler or Express.js style instance

import express from 'express'
const app = express()
app.use(...)
export default app

To start application for development run yarn start or npm run start.
To build application for production run yarn build or npm run build.
To start application for production after build run PORT=8000 node ./build/server.

For extended integration, e.g. enabling cold reload state persistence or getting mounted path of built assets and bundles, read section on Utilities

Configuration

In package.json add frontful.environment property. Configuration can be done in several ways as provided by frontful-config, bellow are two examples.

Value of frontful.environment property can be configuration object with property structure as described in configuration defaults/schema

// package.json
{
  "frontful": {
    "environment": {
      ...
    }
  }
}

Value of frontful.environment property can also be path to ES5 .js file that provides configuration

// package.json
{
  "frontful": {
    "environment": "./config.environment.js"
  }
}

// config.environment.js
module.exports = {
  ...
}

Babel configuration

frontful-environment uses babel-preset-frontful as its Babel preset. To customize babel preset refer to babel-preset-frontful Configuration

Webpack configuration

To configure Webpack, refer to server.webpack and browser.webpack properties in configuration defaults/schema. Both have two additional properties

options – options that will be passed to provider/webpack/browser or provider/webpack/server. Keep in mind that these options are not Webpack options but ones accepted by provider factory functions.
config – fully formed Webpack configuration that can be created manually or by using frontful-environment/provider/webpack/browser or frontful-environment/provider/webpack/server factory functions

Utilities

`bundle`

To get build bundle absolute mount path use environment.bundle utility object

import environment from 'frontful-environment'
const bundle = environment.bundle
const html = `
  <html>
    <head>
      <link rel="stylesheet" href="https://github.com/frontful/${bundle.css.vendor}">
      <link rel="stylesheet" href="https://github.com/frontful/${bundle.css.main}">
    </head>
    <body>
      <div id="app"></div>
      <script src="https://github.com/frontful/${bundle.js.vendor}"></script>
      <script src="https://github.com/frontful/${bundle.js.main}"></script>
    </body>
  </html>
`

`coldreload`

Depending on what part of code changes server, browser or both, respective bundles get rebuilt and page in the browser is automatically reloaded.

By default client state is lost. To persist and revive application state use environment.coldreload utility object

// In browser
import environment from 'frontful-environment'
// Return serialized JSON state that needs to be persisted
environment.coldreload.serializer = () => {
  return models.serialize()
}
// Deserialize persisted JSON state to application model
// If cold state is deserialized on server this can be omitted
environment.coldreload.deserializer = (state) => {
  models.deserialize(state)
}

// On server
import environment from 'frontful-environment'
// Check if serialized state exists and deserialize it to your application model
// For isomorphic apps using React this will ensure that DOM rendered on server matches client DOM
if (environment.coldreload.state) {
  models.deserialize(environment.coldreload.state)
}

This mechanic should be compatible with any state management system that support serialization and deserialization, e.g Redux or Mobx.

`error`

frontful-environment provides cleaned up Error output for build errors. Same Error parsing can be had in your application by using environment.error utility object.
This utility works only on server.

import environment from 'frontful-environment'
// Parse error
const error = environment.error.parser(e)
// Log error in with colors
console.log(error.colorful)
// Log error without colors
console.log(error.string)

// To format Express.js errors, mount error handler `Express` middleware as las middleware in application
app.use(environment.error.getHandler())

`server`

To access http server instance use environment.server getter utility

import environment from 'frontful-environment'
const server = environment.server

`listener`

To access http servers listener instance use environment.listener getter utility

import environment from 'frontful-environment'
const listener = environment.listener

Assets

Assets can be referenced in few ways.

By absolute path to assets. Mount asset folder, then reference asset on its absolute mounted path.

import express from 'express'
const app = express()
app.use('/assets', express.static('assets', {maxAge: '7d'}))

.container {
  background-image: url(/assets/image.png);
}

By importing asset in you Javascript code with extension included. Works with svg, png, jpg, jpeg, gif and ico assets.

import image from './image.png'
export default () => (
  <img src={image} />
)

By using relative path in CSS. Works with svg, png, jpg, jpeg, gif and ico assets.

.container {
  background-image: url(./image.png);
}

If assets are references other than by its absolute path and its file size is less than 1kB its content will be inlined.

CSS

frontful-environment supports standard CSS, SCSS, SASS, as well as CSS Modules for each of these style approaches.
Frontful infrastructure also provides ability to style application using CSS in JS approach, for more details refer to frontful-style

Standard CSS, SCSS, SASS

// Browser
import `./style.scss`

CSS Modules

CSS Module support is added by adding .module prefix to style extension, e.g. Component.module.css or Component.module.scss, importing CSS module in your Javascript code.

/* Component.module.css */
.container {
  color: green;
}

import style from `./Component.module.css`
export default () => (
  <div className={style.container}>
    Hello CSS Modules
  </div>
)

SVG

Apart from using SVG as any other asset by directly referencing or importing it, SVG can be used in React app as React component.
For SVG to be interpreted as React component, .svg extension must be prefixed with .jsx e.g. icon.jsx.svg

import Icon from './assets/icon.jsx.svg'
export default () => (
  <div>
    <Icon />
  </div>
)

Package development assist

For more details on package development refer to package development assist