SVG ์ด๋ฏธ์ง๋ฅผ Icon Font๋ก ๋ณํํด์ฃผ๋ ์ฌ์ดํธ
โ https://icomoon.io/app/#/select
SVG ์ด๋ฏธ์ง๋ฅผ Icon Font๋ก ๋ณํํ๋ ๋ฐฉ๋ฒ
โ SVG๋ฅผ Icon Font๋ก ๋ฐ๊พธ๋ ๋ฐฉ๋ฒ(์น)
icomoon์ ์ฌ์ฉํ์ฌ ์์ด์ฝ์ ์์ฑํ ํ ๋ค์ด๋ก๋ํ๊ธฐ ์ ์
์ค์ ์์ CSS Selector๋ฅผ 'Use a class'๋ก ๋ณ๊ฒฝํด์ผ ํ๋ค.
๋ค์ด๋ก๋ํ ํ์ผ ์ค์์ icomoon.ttf
์ selection.json
ํ์ผ๋ง ํ์ํ๋ค.
์ด ํ์ผ๋ค์ ์๋ ๊ฒฝ๋ก๋ก ์ ์ฅํด ์ฃผ์๋ค.
src/assets/fonts/icomoon.ttf
src/assets/selection.json
react-native-vector-icons ์ค์น
# ์ค์น
npm install --save react-native-vector-icons
npm install --save-dev @types/react-native-vector-icons
icomoon.ttf๋ฅผ ํฐํธ๋ก ์ง์
App.tsx
/* App.tsx */
useEffect(() => {
async function loadFonts() {
await Font.loadAsync({
customIcons: require('./src/assets/fonts/icomoon.ttf'), // โญ๏ธํฐํธ ์ง์
});
setFontsLoaded(true);
}
loadFonts();
}, []);
if (!fontsLoaded) {
return null; // ํฐํธ ๋ก๋ฉ ์ค์๋ ๋ ๋๋ง์ ๋ฐฉ์ง
}
src/components/Icon/Icon.tsx
createIconSetFromIcoMoon(selection.json, icomoon.ttfํฐํธ)
/* src/components/Icon/Icon.tsx */
import icoMoonConfig from '../../assets/selection.json';
import { createIconSetFromIcoMoon } from 'react-native-vector-icons';
const Icon = createIconSetFromIcoMoon(icoMoonConfig, 'customIcons');
export default Icon;
์ด์ ์๋์ฒ๋ผ ์ปค์คํ
์์ด์ฝ ํฐํธ๋ฅผ ์ฌ์ฉํ ์ ์๋ค.
<Icon name="์์ด์ฝํฐํธ์ด๋ฆ" size={30} color="blue" />
import Icon from './src/components/Icon/Icon';
<Icon name="moon" size={30} />