# icon

53개의 포스트
post-thumbnail

IconData from SVG

간혹 라이브러리에서 제공하지 않는 Icon 이미지를 사용하고 싶을 때가 있다. 이럴때 보통은 위와같이 많이 사용한다. 하지만 이 방식은 Widget을 생성하는 방식이므로 순수 IconData를 필요로 하는곳엔 사용할 수가 없다 ㅠ 순수 Custom IconData를 생성하여 사용하는 방식은 아래와 같다 IconData로 만들고 싶은 이미지의 SVG파일을 준비한다 https://www.fluttericon.com 에 접속한다 준비한 SVG파일(들)을 아래 화면에 Drag And Drop 한다 그러면 아래와 같이 파일들이 추가되고 ![](https://velog.velcdn.com/images/bysonstu

2023년 9월 21일
·
0개의 댓글
·

임시 로고 만들기

로고 제작 사이트 https://looka.com/logo-maker/ 무료 PNG https://www.pngwing.com/ 아이콘 만들기 https://converticon.com https://www.icoconverter.com/

2023년 9월 21일
·
0개의 댓글
·
post-thumbnail

앱 아이콘 만들기(안드로이드, ios, 웹용)

앱 아이콘을 쉽게 만들 수 있는 사이트를 공유한다. iconKitchen이라는 사이트이다. 안드로이드는 물론 ios, 웹용 아이콘을 쉽게 만들 수 있다. 기본 아이콘 중에서 고르거나, 가지고 있는 이미지나 텍스트도 가능하다. 배경과 파일 이름 등을 설정하고 다운로드를 누르면 zip파일이 생성된다. ios와 웹은 다양한 크기의 아이콘이 있으므로 원하는 이미지를 사용하면 된다. 안드로이드는 res폴더 안의 mipmap 폴더에 각각 아이콘 이미지가 저장되어 있다. 프로젝트 mipmap폴더를 대체해서 넣어주면 된다. ![](https://velog.velcdn.com/images/sue0-si/post/0c674737-3808-4fce-9e53-48b333bf9e

2023년 8월 22일
·
0개의 댓글
·

Icon component nextjs react

2023년 8월 18일
·
0개의 댓글
·
post-thumbnail

Django - CSS의 font,icon ,display ,position,flexbox 그리고 게임

구글에서 폰트 추가 1. 코드 추가 해당문구 추가 원하는 폰트 다운 해당 폰트 추가 icon fontAwesome사이트 head 끝 태그 전에 붙혀넣기 ![](https://velog.velcdn.com/images

2023년 8월 18일
·
0개의 댓글
·
post-thumbnail

flutter awsome_notification alarm icon 노출 안되는 현상 해결

안드로이드 스튜디오 에뮬레이터에서 잘 나오던 알람 아이콘이 갑자기 안 나왔다 ;; 스택 오버 플로우에서 찾은 해결책 : https://stackoverflow.com/questions/76550728/how-i-can-change-icon-in-local-notification-flutter android/app/build.gradle에 아래 코드 추가 signingConfigs Android에서 Build를 할 때 Sining Key는 필수 사항이다. 물론 debug 모드로 빌드를 진행하면 Android Studio 내부에서 기본으로 제공하는 Key로 빌드를 하지만 앱을 배포하거나 BuildVariant를 release로 바꾸면 Key를 요구하며 때로는 debug Key를 개발자가 수정하는 경우가 생긴다. shrinkResources 난독화하여 파일 크기를 축소하는 기능 shrinkResources false로 파일 크기가 늘어나게 된다. (8

2023년 8월 11일
·
0개의 댓글
·
post-thumbnail

[React] 원하는 곳에 아이콘 넣기

계속 찾다가 마지막에 찾은 방법 까먹기 전에 적어놓기..📝 1. 먼저 터미널에 react-icons을 설치한다. 설치 완료 후, 2. React icons 사이트에 접속해서 원하는 아이콘 선택하기 https://react-icons.github.io/react-icons 이 사이트에 접속해서 카테고리별 다양한 아이콘들을 고를 수 있다. 3. React에 코드 입력하기 아이콘을 골랐다면 다음 사진 속 순서대로 React .js파일에 입력하면 된다. 원하는 아이콘이 속한 카테고리 클릭 import~ 코드를 복사하여 React JavaScript 파일 상단에 붙여넣기. 여기서 주의해야할 점, 노란색 박스

2023년 8월 7일
·
0개의 댓글
·
post-thumbnail

[Flutter] Flavor 빌드 변형 (Firebase, Naver, Kakao, Apple, Google, GCP, API , App Icon)

Flavor 빌드 변형 (Firebase, Naver, Kakao, Apple, Google, GCP, API , App Icon) Create Flavors of a Flutter app Google Cloud Platform Naver Developers Kakao Developers Kakao Dev Talk Singleton Pattern 이란 ? [Firebase 세팅하기 - Flutter 3.0 이후](h

2023년 7월 28일
·
3개의 댓글
·

[Flutter] 푸시 앱 아이콘 뱃지 관리하기

푸시 앱 아이콘 뱃지 관리하기 fluterappbadger | Flutter Package firebase_messaging | Flutter Package 네이티브에서 푸시 수신 받아오기 플랫폼 통신(IOS) - Method Channel 플랫폼 통신(IOS) - Event Channel [플랫폼 통신(Android) - Method Channel](https://velog.io/@tyger

2023년 3월 29일
·
0개의 댓글
·
post-thumbnail

빅데이터 Java 개발자 교육 - 40일차 [jQuery/JS 연동 및 Bootstrap] (실습)

jQuery/JS 연동 입력양식 Focus 앞자리칸의 길이가 6을 초과할 경우 다음 칸으로 포커스가 넘어가게 되고, 반대로 뒷자리칸의 길이가 0이 될 경우 다시 앞자리칸으로 포커스가 넘어오게 된다. 애니메이션 (setInterval) 문서 객체 생성,추가하기 (jQuery 라이브러리 활용) ![](https://velog.velcdn

2023년 3월 27일
·
0개의 댓글
·
post-thumbnail

[react] 컴포넌트 연습 3

⚡ react 컴포넌트 3 📌 Icon 아이콘 라이브러리 Feather를 사용한다. 아이콘의 크기와 색깔, 테두리 굵기를 설정할 수 있다. 아이콘 이름을 통해 다양한 아이콘 사용할 수 있다. rotate 속성을 이용하여 아이콘의 회전도 가능하다. 💻 Icon/index.js > 💡 Buffer 다양하게 사용하지만 여기서는 파일을 읽어들인 뒤 다른 방식으로 인코딩하기 위해 사용한다. 💻 Icon.stories.js 🖨 완성된 컴포넌트

2023년 3월 16일
·
0개의 댓글
·

[Flutter] Launch / App Icon 만들기

Launch / App Icon 만들기 Launch / Splash Screen 만들기 App Icoon Generator App Icon 만들기&backColor=rgb(68%2C%20138%2C%20255)&crop=0&backgroundShape=circle&effects=none&name=ic_launcher) [flutter_

2023년 3월 5일
·
0개의 댓글
·
post-thumbnail

React + Typescript 로 google-FontAwesome 사용해서 아이콘 넣기

웹페이지를 만들다보면 아이콘이 정말정말 많이 필요한데, 그 때 잘 쓰게되는 페이지가 바로 Google-FontAwesome 이다! 하지만 HTML로 코딩할때는 그냥 i 태그 넣어서 간편하게 썼던것이 React로 넘어오면서... typescript로 쓰면서... 조금 복잡해진다... (나만 그런가?) 나에게는 기록이 되고, 누군가에게는 도움이 될 수 있도록 여기에 차근차근 기록해볼테니 함께 해보자 ! FontAwesome 설치 ! fontawesome 난 공식문서만 보고 해결할 때 짜릿함을 느끼는데, 그래서 이렇게 친절한 공식문서를 너무 사랑한다 ... 폰트어썸에는 이렇게 프레임워크마다 사용방법이 잘 나와있는데, 내가 사용할 것은 React

2023년 2월 13일
·
0개의 댓글
·

React Natvie) android에서 fcm notification icon 설정하기

firebase messaging 문서를 따라 fcm 연동을 성공적으로 마쳤다면 android에서는 별도의 추가 설정 없이 push notification을 수신할 수 있게 되었을 것이다. 다만 이상태로 push message를 수신하면 notification에 icon이 이상하게 표시되고 있을 확률이 높다. ios환경에서는 notification icon을 자동으로 app icon으로 사용해주지만, android에서는 그렇지 않기 때문이다. 그 이유는 android의 notification icon 정책에 있다. android는 app icon과는 달리 notification icon의 색상을 단색으로 제한하고 있기 때문이다. 따라서 이런 정책에 따라 별도의 notification icon을 설정해주어야한다. 백문이 불여일견 일단 설정을 해보자 iocn 만들기 일단 사용할 icon을

2023년 1월 24일
·
0개의 댓글
·
post-thumbnail

[Android] Material Icons 사용법

📝 아이콘 아이콘은 의도한 기능을 시각적으로 전달하여 사용자가 사용자 인터페이스를 이해하는 데 도움을 주는 기호입니다. 사용자가 경험했을 것으로 기대되는 실제 세상의 사물에서 아이콘의 아이디어를 얻는 경우가 많습니다. 아이콘 디자인은 종종 필요한 최소한의 수준으로 세부 표현을 줄여서 사용자에게 인식되도록 만듭니다. 📝 아이콘 사용하는 법 라이브러리 설치 아이콘 사용하기 (아이콘 확인) ✏️ 위 그림과 같이 Outlined, Filled, Roun

2023년 1월 24일
·
0개의 댓글
·
post-thumbnail

[Flutter] SNS 애니메이션 만들기(2) - 하트 모션

SNS 애니메이션 만들기(2) - 좋아요 모션 SNS 애니메이션 만들기(1) - 좋아요 아이콘 이번 글에서는 이전 글에서 다뤄봤던 좋아요 아이콘 내용과 거의 같은 내용이지만, 이미지 부분을 더블 클릭 했을 때 좋아요 아이콘이 튀어나오는 UI처리에 대해서 작성하도록 하겠다. Flutter UI 이전 글에 이이서 여기서도 Provider를 사용하여 만들어 보았고 공통 UI 위젯은 같다고 보면된다. 이미지를 보여주는 부분인데 해당 부분을 Stack으로 쌓고 이전 글에서 사용 하였던 AnimatedSwitcher를 똑같이 사용하면 되는데, 여기서는 애니메이션이 나오고 들어가는 In Out의 모션을 처리하기 위해 switchInCurve/switchOutCurve를 이용하여 빠르게 노출 되었다가 천천히 사라지는 애니메이션 처리를 하였다. Ges

2023년 1월 21일
·
0개의 댓글
·
post-thumbnail

[Flutter] SNS 애니메이션 만들기(1) - 좋아요 아이콘

SNS 애니메이션 만들기(1) - 좋아요 아이콘 SNS 애니메이션 만들기(2) - 하트 모션 이번 글에서는 인스타그램 등의 SNS에서 좋아요 하트 아이콘을 클릭 했을 때 처럼 아이콘에 애니메이션 처리를 하는 방법에 대해서 작성하려고 한다. 애니메이션 처리를 위해 AnimatedSwitcher 위젯을 활용하였고, 아래에서 예시로 만든 방법 외에도 다른 방법으로도 충분히 처리하거나 커스텀으로 만들어서 사용할 수도 있다. Flutter UI 여기서 상태관리는 Provider를 사용하기에 Provider를 등록을 해주었다. 아래 snsUiHeartComponent 위젯을 메소드로 만들어서 다른 부분에서도 공통으로 사용할 수 있게 만들어 주었다. UI는 인스타그램의 폼과 비슷한 구조로 간단하게 만들었다. 공통 위젯을 살펴보면 아래 AnimatedS

2023년 1월 20일
·
0개의 댓글
·
post-thumbnail

플러터 앱 아이콘 변경하기

플러터 앱 아이콘 변경하기 android 아이콘 변경 방법 1. https://www.appicon.co/ 로 이동후 사용 할 아이콘을 등록한 후 이미지를 다운로드 받아준다. 2. 이미지를 다운 받으면 다음과 같은 파일이 생긴다. > 3. 안드로이드는 android 폴더로 들어가서 모든 폴더를 복사하여 안드로이드 스튜디오에서 android/app/src/main/res 에 모든 폴더를 붙여넣기 하여 준다. ios 아이콘 변경 1. android와 비슷한데 폴더 이름만 다르다. io

2022년 12월 10일
·
0개의 댓글
·
post-thumbnail

[React]AntDesign 알아보기

AntDesign 설치하기 AntDesign icon 사용하기 여기서 아이콘을 찾아 볼 수 있다. https://ant.design/components/icon CameraOutlined.jsx Typography Layout defaultkey는 처

2022년 11월 29일
·
0개의 댓글
·

Web Design #5 - Icons

Using Good Icons Although icons are one of the supporting features of a website, they are one of the first things the users look at when they look through any website. As such using a good icon is just as much important as using good texts or images. Thankfully, we do not need to create new icons to use in our website. All the icons that we can use are stored in icon packs that can be foun

2022년 10월 22일
·
0개의 댓글
·