replace fontawesome with heroicons

This commit is contained in:
Paul Chavard 2021-04-28 16:05:44 +02:00
parent aae5f3f0db
commit 69ab7854c2
9 changed files with 21 additions and 57 deletions

View file

@ -241,7 +241,7 @@ function ComboboxToken({ value, ...props }) {
onRemove(value);
}}
>
<XIcon style={{ width: '15px', height: '15px' }} />
<XIcon className="icon-size" />
<span className="screen-reader-text">Désélectionner</span>
</button>
{value}

View file

@ -1,16 +1,20 @@
import React from 'react';
import PropTypes from 'prop-types';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { ArrowDownIcon, ArrowUpIcon } from '@heroicons/react/solid';
function MoveButton({ isEnabled, icon, title, onClick }) {
return (
<button
className="button small icon-only move"
className="button small move"
disabled={!isEnabled}
title={title}
onClick={onClick}
>
<FontAwesomeIcon icon={icon} />
{icon == 'arrow-up' ? (
<ArrowUpIcon className="icon-size" />
) : (
<ArrowDownIcon className="icon-size" />
)}
</button>
);
}

View file

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { sortableElement, sortableHandle } from 'react-sortable-hoc';
import { useInView } from 'react-intersection-observer';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { TrashIcon } from '@heroicons/react/outline';
import DescriptionInput from './DescriptionInput';
import LibelleInput from './LibelleInput';
@ -77,7 +77,8 @@ const TypeDeChamp = sortableElement(
});
}}
>
<FontAwesomeIcon icon="trash" title="Supprimer" />
<TrashIcon className="icon-size" />
<span className="screen-reader-text">Supprimer</span>
</button>
</div>
</div>

View file

@ -1,6 +1,6 @@
import React, { useReducer } from 'react';
import PropTypes from 'prop-types';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { PlusIcon } from '@heroicons/react/outline';
import { SortableContainer, addChampLabel } from '../utils';
import TypeDeChamp from './TypeDeChamp';
@ -45,7 +45,7 @@ function TypeDeChampRepetitionOptions({
})
}
>
<FontAwesomeIcon icon="plus" size="sm" />
<PlusIcon className="icon-size" />
&nbsp;&nbsp;
{addChampLabel(state.isAnnotation)}
</button>

View file

@ -1,6 +1,6 @@
import React, { useReducer } from 'react';
import PropTypes from 'prop-types';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { PlusIcon, ArrowCircleDownIcon } from '@heroicons/react/outline';
import { SortableContainer, addChampLabel } from '../utils';
import TypeDeChamp from './TypeDeChamp';
@ -38,7 +38,7 @@ function TypeDeChamps({ state: rootState, typeDeChamps }) {
</SortableContainer>
{state.typeDeChamps.length === 0 && (
<h2>
<FontAwesomeIcon icon="arrow-circle-down" />
<ArrowCircleDownIcon className="icon-size" />
&nbsp;&nbsp;Cliquez sur le bouton «&nbsp;
{addChampLabel(state.isAnnotation)}&nbsp;» pour créer votre premier
champ.
@ -56,7 +56,7 @@ function TypeDeChamps({ state: rootState, typeDeChamps }) {
})
}
>
<FontAwesomeIcon icon="plus" size="sm" />
<PlusIcon className="icon-size" />
&nbsp;&nbsp;
{addChampLabel(state.isAnnotation)}
</button>

View file

@ -1,27 +1,10 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { library } from '@fortawesome/fontawesome-svg-core';
import { faArrowCircleDown } from '@fortawesome/free-solid-svg-icons/faArrowCircleDown';
import { faArrowDown } from '@fortawesome/free-solid-svg-icons/faArrowDown';
import { faArrowsAltV } from '@fortawesome/free-solid-svg-icons/faArrowsAltV';
import { faArrowUp } from '@fortawesome/free-solid-svg-icons/faArrowUp';
import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus';
import { faTrash } from '@fortawesome/free-solid-svg-icons/faTrash';
import Flash from './Flash';
import OperationsQueue from './OperationsQueue';
import TypeDeChamps from './components/TypeDeChamps';
library.add(
faArrowCircleDown,
faArrowDown,
faArrowsAltV,
faArrowUp,
faPlus,
faTrash
);
class TypesDeChampEditor extends Component {
constructor(props) {
super(props);