Add SVG icon support

profile-avatar-switcher
Alex Gleason 2021-09-12 18:54:38 -05:00
rodzic 1ea45f7cdb
commit 3bf15df730
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
7 zmienionych plików z 73 dodań i 1 usunięć

Wyświetl plik

@ -0,0 +1,29 @@
/**
* SvgIcon: abstact component to render SVG icons.
* @module soapbox/components/svg_icon
* @see soapbox/components/icon
*/
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import InlineSVG from 'react-inlinesvg';
export default class SvgIcon extends React.PureComponent {
static propTypes = {
src: PropTypes.string.isRequired,
className: PropTypes.string,
};
render() {
const { src, className } = this.props;
return (
<div className={classNames('svg-icon', className)}>
<InlineSVG src={src} />
</div>
);
}
}

Wyświetl plik

@ -86,6 +86,7 @@
@import 'components/remote-timeline';
@import 'components/federation-restrictions';
@import 'components/aliases';
@import 'components/icon';
// Holiday
@import 'holiday/halloween';

Wyświetl plik

@ -30,6 +30,10 @@
font-size: 20px;
margin-right: 0.2em;
}
.svg-icon {
margin-right: 0.2em;
}
}
.emoji-reacts {

Wyświetl plik

@ -0,0 +1,18 @@
.svg-icon {
width: 16px;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
> svg {
max-width: 100%;
max-height: 100%;
}
}
.icon-button > div {
display: flex;
align-items: center;
justify-content: center;
}

Wyświetl plik

@ -36,7 +36,8 @@
outline: 0 !important;
}
.fa {
.fa,
.svg-icon {
@include font-size(16);
cursor: default;
display: inline-block;

Wyświetl plik

@ -119,6 +119,7 @@
"react-hotkeys": "^1.1.4",
"react-immutable-proptypes": "^2.1.0",
"react-immutable-pure-component": "^2.0.0",
"react-inlinesvg": "^2.3.0",
"react-intl": "^5.0.0",
"react-motion": "^0.5.2",
"react-notification": "^6.8.4",

Wyświetl plik

@ -5213,6 +5213,11 @@ execall@^2.0.0:
dependencies:
clone-regexp "^2.1.0"
exenv@^1.2.2:
version "1.2.2"
resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=
exif-js@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/exif-js/-/exif-js-2.3.0.tgz#9d10819bf571f873813e7640241255ab9ce1a814"
@ -9784,6 +9789,11 @@ react-fast-compare@^3.0.1:
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
react-from-dom@^0.6.0:
version "0.6.1"
resolved "https://registry.yarnpkg.com/react-from-dom/-/react-from-dom-0.6.1.tgz#6740f5a3d79e0c354703e5c096b8fdfe0db71b0f"
integrity sha512-7aAZx7LhRnmR51W5XtmTBYHGFl2n1AdEk1uoXLuzHa1OoGXrxOW/iwLcudvgp6BGX/l4Yh1rtMrIzvhlvbVddg==
react-helmet@^6.0.0:
version "6.0.0"
resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.0.0.tgz#fcb93ebaca3ba562a686eb2f1f9d46093d83b5f8"
@ -9815,6 +9825,14 @@ react-immutable-pure-component@^2.0.0:
resolved "https://registry.yarnpkg.com/react-immutable-pure-component/-/react-immutable-pure-component-2.2.2.tgz#3014d3e20cd5a7a4db73b81f1f1464f4d351684b"
integrity sha512-vkgoMJUDqHZfXXnjVlG3keCxSO/U6WeDQ5/Sl0GK2cH8TOxEzQ5jXqDXHEL/jqk6fsNxV05oH5kD7VNMUE2k+A==
react-inlinesvg@^2.3.0:
version "2.3.0"
resolved "https://registry.yarnpkg.com/react-inlinesvg/-/react-inlinesvg-2.3.0.tgz#62283c0ce7e9d11d8190ec3e89589102288830fd"
integrity sha512-fEGOdDf4k4bcveArbEpj01pJcH8pOCKLxmSj2POFdGvEk5YK0NZVnH6BXpW/PzACHPRsuh1YKAhNZyFnD28oxg==
dependencies:
exenv "^1.2.2"
react-from-dom "^0.6.0"
react-intl-translations-manager@^5.0.3:
version "5.0.3"
resolved "https://registry.yarnpkg.com/react-intl-translations-manager/-/react-intl-translations-manager-5.0.3.tgz#aee010ecf35975673e033ca5d7d3f4147894324d"