manuel
6월 30, 2023, 5:19오후
1
일부 위치에서 이모지를 아이콘으로 사용하려는 테마를 개발 중입니다. 원하는 모습은 대략 다음과 같습니다:
이를 컴포넌트로 패키징하여 기본적으로 Twemoji 스프라이트 시트를 추가하는 방식으로 구현하려고 합니다. 이렇게 하면 사이드바 메뉴와 카테고리 아이콘에 이모지를 선택할 수 있습니다. 시스템 아이콘을 완전히 오버라이드하고 싶지는 않습니다.
전반적으로는 잘 작동하지만, 두 가지 문제에 대해 의견을 듣고 싶습니다:
전체 이모지 세트는 3,000개 이상의 아이콘을 포함하며, 파일 크기는 8MB입니다. 온라인에서 2MB인 제한된 스프라이트 시트를 찾았습니다. 실제로는 전체 세트가 작동하지 않고, 축소된 버전만 작동했습니다. 아이콘 세트의 파일 크기를 어느 정도까지 제한해야 할까요?
기본적으로 이모지의 ID는 유니코드 16진수 값입니다. 따라서 Twemoji Cheatsheet 와 같은 이모지 피커를 사용하여 이모지와 그 16진수 값을 찾아 입력해야 합니다. 예를 들어:
ID를 실제 짧은 이름으로 변경하는 과정을 가장 잘 자동화하는 방법을 아시는 분이 있을까요? 예를 들어 "tw-books"라고 입력하여 선택할 수 있도록 하는 것 같은 방식 말입니다.
Lilly
6월 30, 2023, 5:43오후
2
지금은 딱 이 한마디만 할게요. 네, 꼭 해주세요
Alexander
6월 30, 2023, 5:57오후
3
링크하신 페이지가 ‘이모지 맵’(유니코드, 이름 등)을 가져오기 위해 emojibase를 사용하는 것 같은데, 비슷한 것을 사용해보시는 건 어떨까요?
관련 링크:
import { useEffect, useState } from "react";
import css from "./SearchBox.module.scss";
import Fuse from "fuse.js";
export default function SearchBox({ setAvailabeEmojis, emojis }) {
const fuse = new Fuse(emojis, {
threshold: 0.1,
keys: ["label", "tags", "emoji", "hexcode", "emoticon"],
});
const [query, setQuery] = useState("");
function handleSearch(query) {
if (query == "") {
setAvailabeEmojis(emojis);
return;
}
let results = fuse.search(query);
let flatResults = Object.keys(results).reduce(function (r, k) {
return r.concat(results[k].item);
show original
A collection of lightweight, up-to-date, pre-generated, specification compliant, localized emoji
참고로, 정말 잘 나온 것 같습니다
manuel
7월 1, 2023, 4:12오후
5
알렉산더, 감사합니다! 여기서 살짝 밀어줘서 좋았네요
이제 잘 작동합니다 tw- 접두사와 영어 쇼트코드를 조합하여 지었습니다. 이름에 태그가 포함되어 있지 않으므로 정확한 이모지를 찾으려면 여전히 참조 사이트를 참고해야 할 수 있습니다. 예를 들어, 아이콘 선택기에서 golf 를 입력해도 아래 아이콘은 표시되지 않습니다:
테마 작업이 완료되면 theme-components에서 해당 컴포넌트를 공유할 예정입니다. 지금 바로 테스트해보고 싶으신 분은 아래 저장소를 참고해 주세요: GitHub - nolosb/discourse-twemoji-icons: Use twemojis as icons in Discourse. · GitHub
이거 완전 좋아해요 
변형(스킨 톤, 성별 등)을 제외한 기본 이모지 세트를 추가했습니다. Twemoji 에셋 폴더의 3689개 SVG 파일 중 1869개의 아이콘을 포함합니다. 아이콘 이름은 