{"id":79381,"date":"2024-09-30T23:05:21","date_gmt":"2024-09-30T16:05:21","guid":{"rendered":"https:\/\/itviec.com\/blog\/?p=79381"},"modified":"2024-09-30T23:05:21","modified_gmt":"2024-09-30T16:05:21","slug":"react-native-vector-icons-la-gi","status":"publish","type":"post","link":"https:\/\/itviec.com\/blog\/react-native-vector-icons-la-gi\/","title":{"rendered":"React Native Vector Icons: H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng v\u00e0 c\u00e1c m\u1eb9o hay"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_85 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">N\u1ed9i dung b\u00e0i vi\u1ebft<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/itviec.com\/blog\/react-native-vector-icons-la-gi\/#React_Native_Vector_Icons_la_gi\" >React Native Vector Icons l\u00e0 g\u00ec?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/itviec.com\/blog\/react-native-vector-icons-la-gi\/#Tai_sao_nen_dung_React_Native_Vector_Icons\" >T\u1ea1i sao n\u00ean d\u00f9ng React Native Vector Icons?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/itviec.com\/blog\/react-native-vector-icons-la-gi\/#Cai_dat_React_Native_Vector_icons\" >C\u00e0i \u0111\u1eb7t React Native Vector icons<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/itviec.com\/blog\/react-native-vector-icons-la-gi\/#Huong_dan_cach_su_dung_icons\" >H\u01b0\u1edbng d\u1eabn c\u00e1ch s\u1eed d\u1ee5ng icons<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/itviec.com\/blog\/react-native-vector-icons-la-gi\/#Dieu_chinh_va_toi_uu_React_Native_Vector_Icons\" >\u0110i\u1ec1u ch\u1ec9nh v\u00e0 t\u1ed1i \u01b0u React Native Vector Icons<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/itviec.com\/blog\/react-native-vector-icons-la-gi\/#Cac_van_de_pho_bien_va_cach_khac_phuc_khi_su_dung_React_Native_Vector_Icons\" >C\u00e1c v\u1ea5n \u0111\u1ec1 ph\u1ed5 bi\u1ebfn v\u00e0 c\u00e1ch kh\u1eafc ph\u1ee5c khi s\u1eed d\u1ee5ng React Native Vector Icons<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/itviec.com\/blog\/react-native-vector-icons-la-gi\/#Cac_cau_hoi_thuong_gap_ve_React_Native_Vector_Icons\" >C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 React Native Vector Icons<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/itviec.com\/blog\/react-native-vector-icons-la-gi\/#Tong_ket_React_Native_Vector_Icons\" >T\u1ed5ng k\u1ebft React Native Vector Icons<\/a><\/li><\/ul><\/nav><\/div>\n<p><em><strong>React Native Vector Icons l\u00e0 m\u1ed9t th\u01b0 vi\u1ec7n v\u00f4 c\u00f9ng h\u1eefu \u00edch gi\u00fap c\u00e1c nh\u00e0 ph\u00e1t tri\u1ec3n React Native d\u1ec5 d\u00e0ng th\u00eam c\u00e1c icon v\u00e0o \u1ee9ng d\u1ee5ng c\u1ee7a m\u00ecnh. V\u1edbi h\u00e0ng tr\u0103m icon \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf s\u1eb5n t\u1eeb nhi\u1ec1u b\u1ed9 icon ph\u1ed5 bi\u1ebfn, b\u1ea1n c\u00f3 th\u1ec3 tha h\u1ed3 l\u1ef1a ch\u1ecdn v\u00e0 t\u00f9y ch\u1ec9nh \u0111\u1ec3 t\u1ea1o ra giao di\u1ec7n \u0111\u1ed9c \u0111\u00e1o v\u00e0 chuy\u00ean nghi\u1ec7p.<\/strong><\/em><\/p>\n<p><span style=\"font-weight: 400;\">B\u00e0i vi\u1ebft n\u00e0y s\u1ebd gi\u00fap b\u1ea1n:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e0i \u0111\u1eb7t React Native Vector Icons\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">H\u01b0\u1edbng d\u1eabn c\u00e1ch s\u1eed d\u1ee5ng React Native Vector Icons<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">T\u00edch h\u1ee3p React Native Vector Icons v\u00e0o c\u00e1c th\u00e0nh ph\u1ea7n kh\u00e1c<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">T\u00f9y ch\u1ec9nh v\u00e0 t\u1ed1i \u01b0u icon\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u00e1c m\u1eb9o l\u01b0u \u00fd v\u00e0 m\u1eb9o h\u1eefu \u00edch khi s\u1eed d\u1ee5ng React Native Vector Icons<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"React_Native_Vector_Icons_la_gi\"><\/span><strong>React Native Vector Icons l\u00e0 g\u00ec?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><b>React Native Vector Icons<\/b><span style=\"font-weight: 400;\"> l\u00e0 m\u1ed9t th\u01b0 vi\u1ec7n h\u1ed7 tr\u1ee3 th\u00eam c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng vector v\u00e0o \u1ee9ng d\u1ee5ng React Native m\u1ed9t c\u00e1ch d\u1ec5 d\u00e0ng v\u00e0 hi\u1ec7u qu\u1ea3. Bi\u1ec3u t\u01b0\u1ee3ng vector l\u00e0 c\u00e1c h\u00ecnh \u1ea3nh \u0111\u01b0\u1ee3c t\u1ea1o t\u1eeb c\u00e1c \u0111\u01b0\u1eddng v\u00e0 h\u00ecnh h\u1ecdc, kh\u00f4ng ph\u1ea3i t\u1eeb c\u00e1c \u0111i\u1ec3m \u1ea3nh, n\u00ean ch\u00fang c\u00f3 th\u1ec3 co gi\u00e3n m\u00e0 kh\u00f4ng l\u00e0m gi\u1ea3m ch\u1ea5t l\u01b0\u1ee3ng. \u0110i\u1ec1u n\u00e0y \u0111\u1eb7c bi\u1ec7t quan tr\u1ecdng trong ph\u00e1t tri\u1ec3n \u1ee9ng d\u1ee5ng di \u0111\u1ed9ng, khi m\u00e0 k\u00edch th\u01b0\u1edbc m\u00e0n h\u00ecnh v\u00e0 \u0111\u1ed9 ph\u00e2n gi\u1ea3i c\u00f3 th\u1ec3 thay \u0111\u1ed5i \u0111\u00e1ng k\u1ec3 gi\u1eefa c\u00e1c thi\u1ebft b\u1ecb.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-79562 size-large\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/09\/react-native-vector-icons-2-vippro-640x480.gif\" alt=\"react native vector icons - itviec blog\" width=\"640\" height=\"480\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/09\/react-native-vector-icons-2-vippro-768x576.gif 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/09\/react-native-vector-icons-2-vippro-300x225.gif 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/09\/react-native-vector-icons-2-vippro-200x150.gif 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/09\/react-native-vector-icons-2-vippro-100x75.gif 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/09\/react-native-vector-icons-2-vippro-600x450.gif 600w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/p>\n<p><span style=\"font-weight: 400;\">L\u1ee3i \u00edch c\u1ee7a vi\u1ec7c s\u1eed d\u1ee5ng bi\u1ec3u t\u01b0\u1ee3ng vector trong ph\u00e1t tri\u1ec3n \u1ee9ng d\u1ee5ng l\u00e0 r\u1ea5t r\u00f5 r\u00e0ng:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Ch\u1ea5t l\u01b0\u1ee3ng kh\u00f4ng \u0111\u1ed5i<\/b><span style=\"font-weight: 400;\">: Bi\u1ec3u t\u01b0\u1ee3ng vector c\u00f3 th\u1ec3 \u0111\u01b0\u1ee3c m\u1edf r\u1ed9ng ho\u1eb7c thu nh\u1ecf m\u00e0 kh\u00f4ng b\u1ecb m\u1edd hay v\u1ee1 h\u00ecnh.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>T\u00ednh t\u01b0\u01a1ng th\u00edch cao<\/b><span style=\"font-weight: 400;\">: Bi\u1ec3u t\u01b0\u1ee3ng vector d\u1ec5 d\u00e0ng t\u01b0\u01a1ng th\u00edch v\u1edbi nhi\u1ec1u thi\u1ebft b\u1ecb c\u00f3 \u0111\u1ed9 ph\u00e2n gi\u1ea3i kh\u00e1c nhau, gi\u00fap giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng nh\u1ea5t qu\u00e1n tr\u00ean m\u1ecdi m\u00e0n h\u00ecnh.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Dung l\u01b0\u1ee3ng nh\u1eb9<\/b><span style=\"font-weight: 400;\">: V\u00ec bi\u1ec3u t\u01b0\u1ee3ng vector ch\u1ec9 l\u00e0 c\u00e1c \u0111\u01b0\u1eddng v\u1ebd thay v\u00ec h\u00ecnh \u1ea3nh bitmap, ch\u00fang c\u00f3 k\u00edch th\u01b0\u1edbc t\u1ec7p nh\u1ecf h\u01a1n, gi\u00fap gi\u1ea3m t\u1ea3i cho \u1ee9ng d\u1ee5ng.<\/span><\/li>\n<\/ul>\n<blockquote><p><em>\u0110\u1ecdc th\u00eam: <a href=\"https:\/\/itviec.com\/blog\/tong-quan-react-native-la-gi\/\" target=\"_blank\" rel=\"noopener\"><strong>React Native: Chi ti\u1ebft React Native l\u00e0 g\u00ec v\u00e0 C\u00e1ch s\u1eed d\u1ee5ng A-Z<\/strong><\/a><\/em><\/p><\/blockquote>\n<h2><span class=\"ez-toc-section\" id=\"Tai_sao_nen_dung_React_Native_Vector_Icons\"><\/span><strong>T\u1ea1i sao n\u00ean d\u00f9ng React Native Vector Icons?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><b>React Native Vector Icons<\/b><span style=\"font-weight: 400;\"> kh\u00f4ng ch\u1ec9 \u0111\u01a1n gi\u1ea3n l\u00e0 m\u1ed9t th\u01b0 vi\u1ec7n bi\u1ec3u t\u01b0\u1ee3ng, m\u00e0 n\u00f3 c\u00f2n mang l\u1ea1i nhi\u1ec1u l\u1ee3i \u00edch quan tr\u1ecdng gi\u00fap t\u1ed1i \u01b0u h\u00f3a quy tr\u00ecnh ph\u00e1t tri\u1ec3n:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Hi\u1ec7u qu\u1ea3 cao<\/b><span style=\"font-weight: 400;\">: Th\u01b0 vi\u1ec7n n\u00e0y \u0111\u01b0\u1ee3c t\u00edch h\u1ee3p s\u00e2u v\u00e0o React Native, cho ph\u00e9p b\u1ea1n d\u1ec5 d\u00e0ng th\u00eam c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng v\u00e0o b\u1ea5t k\u1ef3 th\u00e0nh ph\u1ea7n n\u00e0o trong \u1ee9ng d\u1ee5ng ch\u1ec9 b\u1eb1ng v\u00e0i d\u00f2ng m\u00e3. \u0110i\u1ec1u n\u00e0y gi\u00fap ti\u1ebft ki\u1ec7m th\u1eddi gian trong vi\u1ec7c thi\u1ebft k\u1ebf giao di\u1ec7n, \u0111\u1eb7c bi\u1ec7t l\u00e0 v\u1edbi c\u00e1c d\u1ef1 \u00e1n l\u1edbn.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>D\u1ec5 t\u00f9y ch\u1ec9nh<\/b><span style=\"font-weight: 400;\">: B\u1ea1n c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng t\u00f9y ch\u1ec9nh m\u00e0u s\u1eafc, k\u00edch th\u01b0\u1edbc v\u00e0 ki\u1ec3u d\u00e1ng c\u1ee7a bi\u1ec3u t\u01b0\u1ee3ng theo nhu c\u1ea7u. \u0110i\u1ec1u n\u00e0y gi\u00fap vi\u1ec7c t\u00f9y bi\u1ebfn giao di\u1ec7n tr\u1edf n\u00ean linh ho\u1ea1t v\u00e0 \u0111\u00e1p \u1ee9ng \u0111\u01b0\u1ee3c c\u00e1c y\u00eau c\u1ea7u c\u1ee5 th\u1ec3 t\u1eeb thi\u1ebft k\u1ebf UI\/UX.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>H\u1ed7 tr\u1ee3 nhi\u1ec1u th\u01b0 vi\u1ec7n icon n\u1ed5i ti\u1ebfng<\/b><span style=\"font-weight: 400;\">: React Native Vector Icons t\u00edch h\u1ee3p s\u1eb5n nhi\u1ec1u th\u01b0 vi\u1ec7n bi\u1ec3u t\u01b0\u1ee3ng n\u1ed5i ti\u1ebfng nh\u01b0 <\/span><a href=\"https:\/\/fontawesome.com\/\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">FontAwesome<\/span><\/a><span style=\"font-weight: 400;\">, <\/span><a href=\"https:\/\/fonts.google.com\/specimen\/Material+Icons\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">MaterialIcons<\/span><\/a><span style=\"font-weight: 400;\">, <\/span><a href=\"https:\/\/ionic.io\/ionicons\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Ionicons<\/span><\/a><span style=\"font-weight: 400;\">, <\/span><a href=\"https:\/\/icongr.am\/entypo\" target=\"_blank\" rel=\"noopener\"><span style=\"font-weight: 400;\">Entypo<\/span><\/a><span style=\"font-weight: 400;\">, v\u00e0 nhi\u1ec1u th\u01b0 vi\u1ec7n kh\u00e1c. \u0110i\u1ec1u n\u00e0y gi\u00fap nh\u00e0 ph\u00e1t tri\u1ec3n c\u00f3 th\u00eam nhi\u1ec1u l\u1ef1a ch\u1ecdn \u0111\u1ec3 \u00e1p d\u1ee5ng trong c\u00e1c d\u1ef1 \u00e1n m\u00e0 kh\u00f4ng c\u1ea7n ph\u1ea3i t\u1ef1 thi\u1ebft k\u1ebf bi\u1ec3u t\u01b0\u1ee3ng t\u1eeb \u0111\u1ea7u.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">V\u1edbi nh\u1eefng l\u1ee3i \u00edch tr\u00ean, <\/span><b>React Native Vector Icons<\/b><span style=\"font-weight: 400;\"> tr\u1edf th\u00e0nh m\u1ed9t c\u00f4ng c\u1ee5 m\u1ea1nh m\u1ebd v\u00e0 c\u1ea7n thi\u1ebft trong ph\u00e1t tri\u1ec3n \u1ee9ng d\u1ee5ng di \u0111\u1ed9ng hi\u1ec7n \u0111\u1ea1i. Vi\u1ec7c s\u1eed d\u1ee5ng th\u01b0 vi\u1ec7n n\u00e0y kh\u00f4ng ch\u1ec9 c\u1ea3i thi\u1ec7n tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng m\u00e0 c\u00f2n gi\u00fap quy tr\u00ecnh ph\u00e1t tri\u1ec3n tr\u1edf n\u00ean linh ho\u1ea1t v\u00e0 hi\u1ec7u qu\u1ea3 h\u01a1n.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Cai_dat_React_Native_Vector_icons\"><\/span><strong>C\u00e0i \u0111\u1eb7t React Native Vector icons<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 s\u1eed d\u1ee5ng <\/span><b>React Native Vector Icons<\/b><span style=\"font-weight: 400;\"> trong d\u1ef1 \u00e1n c\u1ee7a m\u00ecnh, b\u1ea1n c\u1ea7n th\u1ef1c hi\u1ec7n m\u1ed9t s\u1ed1 b\u01b0\u1edbc c\u00e0i \u0111\u1eb7t c\u01a1 b\u1ea3n, t\u00f9y thu\u1ed9c v\u00e0o vi\u1ec7c b\u1ea1n s\u1eed d\u1ee5ng React Native CLI ho\u1eb7c Expo. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 h\u01b0\u1edbng d\u1eabn chi ti\u1ebft t\u1eebng b\u01b0\u1edbc \u0111\u1ec3 c\u00e0i \u0111\u1eb7t v\u00e0 c\u1ea5u h\u00ecnh th\u01b0 vi\u1ec7n.<\/span><\/p>\n<p><b>Y\u00eau c\u1ea7u:<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Tr\u01b0\u1edbc khi b\u1eaft \u0111\u1ea7u c\u00e0i \u0111\u1eb7t, \u0111\u1ea3m b\u1ea3o r\u1eb1ng b\u1ea1n \u0111\u00e3 thi\u1ebft l\u1eadp m\u00f4i tr\u01b0\u1eddng ph\u00e1t tri\u1ec3n React Native, bao g\u1ed3m:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Node.js<\/b><span style=\"font-weight: 400;\">: M\u1ed9t runtime c\u1ea7n thi\u1ebft \u0111\u1ec3 ch\u1ea1y React Native.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>React Native CLI ho\u1eb7c Expo<\/b><span style=\"font-weight: 400;\">: React Native CLI cho ph\u00e9p b\u1ea1n x\u00e2y d\u1ef1ng \u1ee9ng d\u1ee5ng tr\u1ef1c ti\u1ebfp tr\u00ean m\u00f4i tr\u01b0\u1eddng React Native thu\u1ea7n t\u00fay, trong khi Expo l\u00e0 m\u1ed9t framework ti\u1ec7n l\u1ee3i v\u1edbi nhi\u1ec1u th\u01b0 vi\u1ec7n t\u00edch h\u1ee3p s\u1eb5n, bao g\u1ed3m c\u1ea3 Vector Icons.<\/span><\/li>\n<\/ul>\n<p><b>H\u01b0\u1edbng d\u1eabn c\u00e0i \u0111\u1eb7t:<\/b><\/p>\n<h3><strong>S\u1eed d\u1ee5ng npm ho\u1eb7c yarn (React Native CLI)<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">\u0110\u1ed1i v\u1edbi d\u1ef1 \u00e1n s\u1eed d\u1ee5ng <\/span><b>React Native CLI<\/b><span style=\"font-weight: 400;\">, b\u1ea1n c\u00f3 th\u1ec3 c\u00e0i \u0111\u1eb7t th\u01b0 vi\u1ec7n <\/span><b>react-native-vector-icons<\/b><span style=\"font-weight: 400;\"> b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng npm ho\u1eb7c yarn.<\/span><\/p>\n<p><b>C\u00e0i \u0111\u1eb7t b\u1eb1ng npm<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">npm install react-native-vector-icons<\/span><\/pre>\n<p><b>C\u00e0i \u0111\u1eb7t b\u1eb1ng yarn<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">yarn add react-native-vector-icons<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Sau khi c\u00e0i \u0111\u1eb7t, trong c\u00e1c phi\u00ean b\u1ea3n React Native t\u1eeb 0.60 tr\u1edf l\u00ean, qu\u00e1 tr\u00ecnh <\/span><b>auto-linking<\/b><span style=\"font-weight: 400;\"> s\u1ebd t\u1ef1 \u0111\u1ed9ng li\u00ean k\u1ebft th\u01b0 vi\u1ec7n n\u00e0y v\u00e0o d\u1ef1 \u00e1n c\u1ee7a b\u1ea1n. B\u1ea1n kh\u00f4ng c\u1ea7n ph\u1ea3i th\u1ef1c hi\u1ec7n th\u00eam c\u00e1c b\u01b0\u1edbc li\u00ean k\u1ebft th\u1ee7 c\u00f4ng.<\/span><\/p>\n<h3><strong>Li\u00ean k\u1ebft th\u1ee7 c\u00f4ng cho d\u1ef1 \u00e1n kh\u00f4ng s\u1eed d\u1ee5ng auto-linking<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">N\u1ebfu b\u1ea1n \u0111ang s\u1eed d\u1ee5ng phi\u00ean b\u1ea3n React Native <\/span><b>d\u01b0\u1edbi 0.60<\/b><span style=\"font-weight: 400;\">, qu\u00e1 tr\u00ecnh auto-linking kh\u00f4ng \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3, v\u00ec v\u1eady b\u1ea1n c\u1ea7n li\u00ean k\u1ebft th\u1ee7 c\u00f4ng th\u01b0 vi\u1ec7n <\/span><b>react-native-vector-icons<\/b><span style=\"font-weight: 400;\"> v\u00e0o d\u1ef1 \u00e1n.<\/span><\/p>\n<p><b>H\u01b0\u1edbng d\u1eabn li\u00ean k\u1ebft th\u1ee7 c\u00f4ng cho iOS<\/b><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">M\u1edf d\u1ef1 \u00e1n c\u1ee7a b\u1ea1n trong Xcode b\u1eb1ng c\u00e1ch v\u00e0o th\u01b0 m\u1ee5c <\/span><span style=\"font-weight: 400;\">ios<\/span><span style=\"font-weight: 400;\"> v\u00e0 m\u1edf file <\/span><span style=\"font-weight: 400;\">.xcworkspace<\/span><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Trong Xcode, ch\u1ecdn <\/span><b>Library Folder<\/b><span style=\"font-weight: 400;\"> (<\/span><span style=\"font-weight: 400;\">Libraries<\/span><span style=\"font-weight: 400;\">), b\u1ea5m chu\u1ed9t ph\u1ea3i v\u00e0 ch\u1ecdn <\/span><b>Add Files to &#8220;YourProjectName&#8221;<\/b><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u0110i\u1ec1u h\u01b0\u1edbng \u0111\u1ebfn th\u01b0 m\u1ee5c <\/span><span style=\"font-weight: 400;\">node_modules\/react-native-vector-icons\/Fonts<\/span><span style=\"font-weight: 400;\"> v\u00e0 th\u00eam t\u1ea5t c\u1ea3 c\u00e1c file ph\u00f4ng ch\u1eef (<\/span><span style=\"font-weight: 400;\">.ttf<\/span><span style=\"font-weight: 400;\">).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Sau \u0111\u00f3, trong m\u1ee5c <\/span><b>Build Phases<\/b><span style=\"font-weight: 400;\"> c\u1ee7a d\u1ef1 \u00e1n, k\u00e9o c\u00e1c file ph\u00f4ng ch\u1eef \u0111\u00e3 th\u00eam v\u00e0o <\/span><b>Copy Bundle Resources<\/b><span style=\"font-weight: 400;\">.<\/span><\/li>\n<\/ul>\n<p><b>H\u01b0\u1edbng d\u1eabn li\u00ean k\u1ebft th\u1ee7 c\u00f4ng cho Android<\/b><\/p>\n<p><span style=\"font-weight: 400;\">M\u1edf file <\/span><span style=\"font-weight: 400;\">android\/app\/build.gradle<\/span><span style=\"font-weight: 400;\"> v\u00e0 th\u00eam d\u00f2ng sau trong m\u1ee5c <\/span><span style=\"font-weight: 400;\">apply from<\/span><span style=\"font-weight: 400;\">:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">apply from: \"..\/..\/node_modules\/react-native-vector-icons\/fonts.gradle\"<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">\u0110i\u1ec1u n\u00e0y gi\u00fap \u1ee9ng d\u1ee5ng Android nh\u1eadn di\u1ec7n v\u00e0 s\u1eed d\u1ee5ng c\u00e1c ph\u00f4ng ch\u1eef t\u1eeb th\u01b0 vi\u1ec7n Vector Icons.<\/span><\/p>\n<h3><strong>S\u1eed d\u1ee5ng v\u1edbi Expo<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">N\u1ebfu b\u1ea1n \u0111ang s\u1eed d\u1ee5ng <\/span><b>Expo<\/b><span style=\"font-weight: 400;\">, qu\u00e1 tr\u00ecnh c\u00e0i \u0111\u1eb7t s\u1ebd \u0111\u01a1n gi\u1ea3n h\u01a1n nhi\u1ec1u v\u00ec Expo \u0111\u00e3 t\u00edch h\u1ee3p s\u1eb5n <\/span><b>React Native Vector Icons<\/b><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">B\u1ea1n kh\u00f4ng c\u1ea7n c\u00e0i \u0111\u1eb7t th\u01b0 vi\u1ec7n qua npm ho\u1eb7c yarn. Thay v\u00e0o \u0111\u00f3, b\u1ea1n ch\u1ec9 c\u1ea7n import v\u00e0 s\u1eed d\u1ee5ng nh\u01b0 sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">import { Ionicons } from '@expo\/vector-icons';<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Expo h\u1ed7 tr\u1ee3 nhi\u1ec1u th\u01b0 vi\u1ec7n bi\u1ec3u t\u01b0\u1ee3ng kh\u00e1c nhau nh\u01b0 FontAwesome, MaterialIcons, Ionicons, v.v., v\u00e0 b\u1ea1n ch\u1ec9 c\u1ea7n import tr\u1ef1c ti\u1ebfp t\u1eeb th\u01b0 vi\u1ec7n Expo.<\/span><\/p>\n<h3><b>L\u01b0u \u00fd sau c\u00e0i \u0111\u1eb7t<\/b><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u0110\u1ed1i v\u1edbi c\u00e1c d\u1ef1 \u00e1n s\u1eed d\u1ee5ng <\/span><b>React Native CLI<\/b><span style=\"font-weight: 400;\">, sau khi c\u00e0i \u0111\u1eb7t th\u01b0 vi\u1ec7n, h\u00e3y ch\u1eafc ch\u1eafn r\u1eb1ng b\u1ea1n \u0111\u00e3 ch\u1ea1y l\u1ec7nh <\/span><b>react-native link<\/b><span style=\"font-weight: 400;\"> (n\u1ebfu c\u1ea7n tr\u00ean c\u00e1c phi\u00ean b\u1ea3n c\u0169).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Sau khi ho\u00e0n t\u1ea5t qu\u00e1 tr\u00ecnh c\u00e0i \u0111\u1eb7t, b\u1ea1n c\u1ea7n kh\u1edfi \u0111\u1ed9ng l\u1ea1i \u1ee9ng d\u1ee5ng c\u1ee7a m\u00ecnh \u0111\u1ec3 c\u00e1c thay \u0111\u1ed5i c\u00f3 hi\u1ec7u l\u1ef1c.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">B\u1eb1ng c\u00e1ch th\u1ef1c hi\u1ec7n c\u00e1c b\u01b0\u1edbc c\u00e0i \u0111\u1eb7t tr\u00ean, b\u1ea1n s\u1ebd c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng th\u00e0nh c\u00f4ng <\/span><b>React Native Vector Icons<\/b><span style=\"font-weight: 400;\"> trong d\u1ef1 \u00e1n c\u1ee7a m\u00ecnh v\u00e0 t\u1eadn d\u1ee5ng s\u1ee9c m\u1ea1nh c\u1ee7a th\u01b0 vi\u1ec7n bi\u1ec3u t\u01b0\u1ee3ng \u0111a d\u1ea1ng n\u00e0y trong vi\u1ec7c ph\u00e1t tri\u1ec3n giao di\u1ec7n ng\u01b0\u1eddi d\u00f9ng.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Huong_dan_cach_su_dung_icons\"><\/span><strong>H\u01b0\u1edbng d\u1eabn c\u00e1ch s\u1eed d\u1ee5ng icons<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Sau khi c\u00e0i \u0111\u1eb7t th\u01b0 vi\u1ec7n <\/span><b>React Native Vector Icons<\/b><span style=\"font-weight: 400;\">, b\u01b0\u1edbc ti\u1ebfp theo l\u00e0 l\u00e0m quen v\u1edbi c\u00e1ch s\u1eed d\u1ee5ng th\u01b0 vi\u1ec7n n\u00e0y \u0111\u1ec3 hi\u1ec3n th\u1ecb v\u00e0 t\u00f9y ch\u1ec9nh c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng (icons) trong \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 h\u01b0\u1edbng d\u1eabn chi ti\u1ebft c\u00e1ch import, hi\u1ec3n th\u1ecb, v\u00e0 t\u00f9y ch\u1ec9nh c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng t\u1eeb th\u01b0 vi\u1ec7n n\u00e0y.<\/span><\/p>\n<h3><strong>Import icon t\u1eeb th\u01b0 vi\u1ec7n react-native-vector-icons<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 s\u1eed d\u1ee5ng bi\u1ec3u t\u01b0\u1ee3ng t\u1eeb th\u01b0 vi\u1ec7n, tr\u01b0\u1edbc ti\u00ean b\u1ea1n c\u1ea7n <\/span><b>import<\/b><span style=\"font-weight: 400;\"> \u0111\u00fang lo\u1ea1i bi\u1ec3u t\u01b0\u1ee3ng m\u00e0 b\u1ea1n mu\u1ed1n s\u1eed d\u1ee5ng. Th\u01b0 vi\u1ec7n <\/span><span style=\"font-weight: 400;\">react-native-vector-icons<\/span><span style=\"font-weight: 400;\"> h\u1ed7 tr\u1ee3 nhi\u1ec1u b\u1ed9 bi\u1ec3u t\u01b0\u1ee3ng (icon sets) kh\u00e1c nhau nh\u01b0 FontAwesome, MaterialIcons, Ionicons, v\u00e0 nhi\u1ec1u b\u1ed9 kh\u00e1c.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5, \u0111\u1ec3 s\u1eed d\u1ee5ng <\/span><b>FontAwesome<\/b><span style=\"font-weight: 400;\">, b\u1ea1n c\u00f3 th\u1ec3 import nh\u01b0 sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">import Icon from 'react-native-vector-icons\/FontAwesome';<\/span><\/pre>\n<h3><strong>C\u00e1ch hi\u1ec3n th\u1ecb icon \u0111\u01a1n gi\u1ea3n v\u1edbi component &lt;Icon \/&gt;<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Sau khi \u0111\u00e3 import th\u00e0nh c\u00f4ng, b\u1ea1n c\u00f3 th\u1ec3 hi\u1ec3n th\u1ecb bi\u1ec3u t\u01b0\u1ee3ng b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng component <\/span><span style=\"font-weight: 400;\">&lt;Icon \/&gt;<\/span><span style=\"font-weight: 400;\"> c\u1ee7a React Native Vector Icons. B\u1ea1n ch\u1ec9 c\u1ea7n cung c\u1ea5p t\u00ean c\u1ee7a bi\u1ec3u t\u01b0\u1ee3ng m\u00e0 b\u1ea1n mu\u1ed1n hi\u1ec3n th\u1ecb.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5 hi\u1ec3n th\u1ecb m\u1ed9t bi\u1ec3u t\u01b0\u1ee3ng \u0111\u01a1n gi\u1ea3n:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;Icon name=\"home\" size={30} color=\"#900\" \/&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Trong v\u00ed d\u1ee5 tr\u00ean:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">name=&#8221;home&#8221;<\/span><span style=\"font-weight: 400;\"> l\u00e0 t\u00ean c\u1ee7a bi\u1ec3u t\u01b0\u1ee3ng t\u1eeb FontAwesome.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">size={30}<\/span><span style=\"font-weight: 400;\"> l\u00e0 k\u00edch th\u01b0\u1edbc c\u1ee7a bi\u1ec3u t\u01b0\u1ee3ng.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">color=&#8221;#900&#8243;<\/span><span style=\"font-weight: 400;\"> l\u00e0 m\u00e0u c\u1ee7a bi\u1ec3u t\u01b0\u1ee3ng.<\/span><\/li>\n<\/ul>\n<h3><strong>T\u00f9y ch\u1ec9nh k\u00edch th\u01b0\u1edbc, m\u00e0u s\u1eafc v\u00e0 phong c\u00e1ch (style) c\u1ee7a icon<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">B\u1ea1n c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng t\u00f9y ch\u1ec9nh c\u00e1c thu\u1ed9c t\u00ednh c\u1ee7a bi\u1ec3u t\u01b0\u1ee3ng nh\u01b0 <\/span><b>k\u00edch th\u01b0\u1edbc<\/b><span style=\"font-weight: 400;\">, <\/span><b>m\u00e0u s\u1eafc<\/b><span style=\"font-weight: 400;\">, v\u00e0 <\/span><b>style<\/b><span style=\"font-weight: 400;\">. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u1ed9t v\u00ed d\u1ee5 chi ti\u1ebft v\u1ec1 c\u00e1ch t\u00f9y ch\u1ec9nh bi\u1ec3u t\u01b0\u1ee3ng:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;Icon name=\"rocket\" size={50} color=\"blue\" style={{ padding: 10 }} \/&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Trong v\u00ed d\u1ee5 tr\u00ean:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">size={50}<\/span><span style=\"font-weight: 400;\">: T\u0103ng k\u00edch th\u01b0\u1edbc c\u1ee7a bi\u1ec3u t\u01b0\u1ee3ng l\u00ean 50.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">color=&#8221;blue&#8221;<\/span><span style=\"font-weight: 400;\">: \u0110\u1eb7t m\u00e0u bi\u1ec3u t\u01b0\u1ee3ng th\u00e0nh xanh d\u01b0\u01a1ng.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">style={{ padding: 10 }}<\/span><span style=\"font-weight: 400;\">: \u00c1p d\u1ee5ng style CSS \u0111\u1ec3 t\u1ea1o kho\u1ea3ng c\u00e1ch \u0111\u1ec7m xung quanh bi\u1ec3u t\u01b0\u1ee3ng.<\/span><\/li>\n<\/ul>\n<h3><strong>S\u1eed d\u1ee5ng c\u00e1c th\u01b0 vi\u1ec7n icon ph\u1ed5 bi\u1ebfn<\/strong><\/h3>\n<p>React Native Vector Icons<span style=\"font-weight: 400;\"> h\u1ed7 tr\u1ee3 nhi\u1ec1u b\u1ed9 bi\u1ec3u t\u01b0\u1ee3ng kh\u00e1c nhau, gi\u00fap b\u1ea1n d\u1ec5 d\u00e0ng ch\u1ecdn l\u1ef1a b\u1ed9 bi\u1ec3u t\u01b0\u1ee3ng ph\u00f9 h\u1ee3p v\u1edbi giao di\u1ec7n v\u00e0 phong c\u00e1ch \u1ee9ng d\u1ee5ng c\u1ee7a m\u00ecnh.<\/span><\/p>\n<h4><strong>FontAwesome<\/strong><\/h4>\n<p><span style=\"font-weight: 400;\">\u0110\u00e2y l\u00e0 m\u1ed9t b\u1ed9 bi\u1ec3u t\u01b0\u1ee3ng ph\u1ed5 bi\u1ebfn v\u1edbi nhi\u1ec1u bi\u1ec3u t\u01b0\u1ee3ng \u0111\u1eb9p m\u1eaft v\u00e0 phong ph\u00fa. \u0110\u1ec3 s\u1eed d\u1ee5ng bi\u1ec3u t\u01b0\u1ee3ng t\u1eeb FontAwesome:<\/span><\/p>\n<p><b>Import FontAwesome<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">import Icon from 'react-native-vector-icons\/FontAwesome';<\/span><\/pre>\n<p><b>V\u00ed d\u1ee5 hi\u1ec3n th\u1ecb m\u1ed9t bi\u1ec3u t\u01b0\u1ee3ng<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;Icon name=\"user\" size={40} color=\"green\" \/&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Trong v\u00ed d\u1ee5 n\u00e0y, bi\u1ec3u t\u01b0\u1ee3ng <\/span><span style=\"font-weight: 400;\">user<\/span><span style=\"font-weight: 400;\"> t\u1eeb FontAwesome \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb v\u1edbi k\u00edch th\u01b0\u1edbc 40 v\u00e0 m\u00e0u xanh l\u00e1.<\/span><\/p>\n<h4><strong>Material Icons<\/strong><\/h4>\n<p><span style=\"font-weight: 400;\">B\u1ed9 bi\u1ec3u t\u01b0\u1ee3ng <\/span><b>MaterialIcons<\/b><span style=\"font-weight: 400;\"> \u0111\u01b0\u1ee3c l\u1ea5y t\u1eeb thi\u1ebft k\u1ebf Material Design c\u1ee7a Google, mang phong c\u00e1ch hi\u1ec7n \u0111\u1ea1i, ph\u00f9 h\u1ee3p v\u1edbi c\u00e1c \u1ee9ng d\u1ee5ng Android.<\/span><\/p>\n<p><b>Import MaterialIcons<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">import Icon from 'react-native-vector-icons\/MaterialIcons';<\/span><\/pre>\n<p><b>V\u00ed d\u1ee5 hi\u1ec3n th\u1ecb m\u1ed9t bi\u1ec3u t\u01b0\u1ee3ng t\u1eeb Material Design<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;Icon name=\"search\" size={30} color=\"black\" \/&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Bi\u1ec3u t\u01b0\u1ee3ng <\/span><span style=\"font-weight: 400;\">search<\/span><span style=\"font-weight: 400;\"> t\u1eeb MaterialIcons s\u1ebd \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb v\u1edbi k\u00edch th\u01b0\u1edbc 30 v\u00e0 m\u00e0u \u0111en.<\/span><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-79560 size-large\" src=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/09\/react-native-vector-icons-1-vippro-640x480.gif\" alt=\"react native vector icons - itviec blog\" width=\"640\" height=\"480\" srcset=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/09\/react-native-vector-icons-1-vippro-1536x1152.gif 640w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/09\/react-native-vector-icons-1-vippro-300x225.gif 300w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/09\/react-native-vector-icons-1-vippro-200x150.gif 200w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/09\/react-native-vector-icons-1-vippro-100x75.gif 100w, https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/09\/react-native-vector-icons-1-vippro-600x450.gif 600w\" sizes=\"auto, (max-width: 640px) 100vw, 640px\" \/><\/p>\n<h4><strong>Ionicons<\/strong><\/h4>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 hi\u1ec3n th\u1ecb c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng t\u1eeb b\u1ed9 <\/span><b>Ionicons<\/b><span style=\"font-weight: 400;\">, h\u00e3y import nh\u01b0 sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">import Icon from 'react-native-vector-icons\/Ionicons';<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5 s\u1eed d\u1ee5ng <\/span><b>Ionicons<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;Icon name=\"md-checkmark-circle\" size={32} color=\"green\" \/&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Bi\u1ec3u t\u01b0\u1ee3ng <\/span><span style=\"font-weight: 400;\">md-checkmark-circle<\/span><span style=\"font-weight: 400;\"> \u0111\u01b0\u1ee3c hi\u1ec3n th\u1ecb v\u1edbi k\u00edch th\u01b0\u1edbc 32 v\u00e0 m\u00e0u xanh l\u00e1.<\/span><\/p>\n<h4><strong>H\u01b0\u1edbng d\u1eabn import v\u00e0 s\u1eed d\u1ee5ng c\u00e1c b\u1ed9 icon kh\u00e1c<\/strong><\/h4>\n<p><span style=\"font-weight: 400;\">Ngo\u00e0i ba b\u1ed9 bi\u1ec3u t\u01b0\u1ee3ng ph\u1ed5 bi\u1ebfn n\u00eau tr\u00ean, <\/span><b>React Native Vector Icons<\/b><span style=\"font-weight: 400;\"> c\u00f2n h\u1ed7 tr\u1ee3 nhi\u1ec1u b\u1ed9 bi\u1ec3u t\u01b0\u1ee3ng kh\u00e1c nh\u01b0 <\/span><b>Entypo<\/b><span style=\"font-weight: 400;\">, <\/span><b>Feather<\/b><span style=\"font-weight: 400;\">, <\/span><b>AntDesign<\/b><span style=\"font-weight: 400;\">, v.v. \u0110\u1ec3 s\u1eed d\u1ee5ng c\u00e1c b\u1ed9 n\u00e0y, ch\u1ec9 c\u1ea7n thay \u0111\u1ed5i t\u00ean b\u1ed9 bi\u1ec3u t\u01b0\u1ee3ng trong c\u00e2u l\u1ec7nh import.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u00ed d\u1ee5 s\u1eed d\u1ee5ng b\u1ed9 <\/span><b>Entypo<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">import Icon from 'react-native-vector-icons\/Entypo';<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0&lt;Icon name=\"aircraft\" size={30} color=\"#00f\" \/&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">V\u1edbi b\u1ed9 <\/span><b>Feather<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">import Icon from 'react-native-vector-icons\/Feather';\u00a0<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;Icon name=\"camera\" size={30} color=\"black\" \/&gt;<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">C\u00e1c b\u1ed9 icon kh\u00e1c c\u0169ng tu\u00e2n theo c\u00fa ph\u00e1p t\u01b0\u01a1ng t\u1ef1, ch\u1ec9 c\u1ea7n thay \u0111\u1ed5i t\u00ean b\u1ed9 bi\u1ec3u t\u01b0\u1ee3ng khi import.<\/span><\/p>\n<h3><strong>So s\u00e1nh c\u00e1c th\u01b0 vi\u1ec7n icon<\/strong><\/h3>\n<table>\n<tbody>\n<tr>\n<td><b>Th\u01b0 vi\u1ec7n<\/b><\/td>\n<td><b>FontAwesome<\/b><\/td>\n<td><b>Material Icons<\/b><\/td>\n<td><b>Ionicons<\/b><\/td>\n<\/tr>\n<tr>\n<td><b>Ph\u00e1t h\u00e0nh l\u1ea7n \u0111\u1ea7u<\/b><\/td>\n<td><span style=\"font-weight: 400;\">2012<\/span><\/td>\n<td><span style=\"font-weight: 400;\">2014<\/span><\/td>\n<td><span style=\"font-weight: 400;\">2013<\/span><\/td>\n<\/tr>\n<tr>\n<td><b>Nh\u00e0 ph\u00e1t tri\u1ec3n<\/b><\/td>\n<td><span style=\"font-weight: 400;\">Fonticons, Inc.<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Google<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Ionic Framework<\/span><\/td>\n<\/tr>\n<tr>\n<td><b>T\u1ed5ng s\u1ed1 icons<\/b><\/td>\n<td><span style=\"font-weight: 400;\">H\u01a1n 1,500 icons<\/span><\/td>\n<td><span style=\"font-weight: 400;\">H\u01a1n 1,000 icons<\/span><\/td>\n<td><span style=\"font-weight: 400;\">H\u01a1n 1,300 icons<\/span><\/td>\n<\/tr>\n<tr>\n<td><b>Phong c\u00e1ch thi\u1ebft k\u1ebf<\/b><\/td>\n<td><span style=\"font-weight: 400;\">C\u1ed5 \u0111i\u1ec3n, mang t\u00ednh bi\u1ec3u t\u01b0\u1ee3ng cao, d\u1ec5 nh\u1eadn di\u1ec7n<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Hi\u1ec7n \u0111\u1ea1i, \u0111\u01a1n gi\u1ea3n, d\u1ef1a tr\u00ean Material Design c\u1ee7a Google<\/span><\/td>\n<td><span style=\"font-weight: 400;\">C\u00e2n b\u1eb1ng gi\u1eefa truy\u1ec1n th\u1ed1ng v\u00e0 hi\u1ec7n \u0111\u1ea1i, ph\u00f9 h\u1ee3p v\u1edbi UI di \u0111\u1ed9ng<\/span><\/td>\n<\/tr>\n<tr>\n<td><b>M\u1ee9c \u0111\u1ed9 ph\u1ed5 bi\u1ebfn<\/b><\/td>\n<td><span style=\"font-weight: 400;\">R\u1ea5t ph\u1ed5 bi\u1ebfn, \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng trong nhi\u1ec1u d\u1ef1 \u00e1n<\/span><\/td>\n<td><span style=\"font-weight: 400;\">R\u1ea5t ph\u1ed5 bi\u1ebfn, \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng trong nhi\u1ec1u d\u1ef1 \u00e1n<\/span><\/td>\n<td><span style=\"font-weight: 400;\">\u0110\u01b0\u1ee3c s\u1eed d\u1ee5ng nhi\u1ec1u trong c\u00e1c \u1ee9ng d\u1ee5ng mobile hi\u1ec7n \u0111\u1ea1i<\/span><\/td>\n<\/tr>\n<tr>\n<td><b>H\u1ed7 tr\u1ee3 t\u00f9y ch\u1ec9nh<\/b><\/td>\n<td><span style=\"font-weight: 400;\">H\u1ed7 tr\u1ee3 t\u00f9y ch\u1ec9nh m\u00e0u s\u1eafc, k\u00edch th\u01b0\u1edbc, v\u00e0 c\u00e1c hi\u1ec7u \u1ee9ng<\/span><\/td>\n<td><span style=\"font-weight: 400;\">H\u1ed7 tr\u1ee3 t\u00f9y ch\u1ec9nh m\u00e0u s\u1eafc, k\u00edch th\u01b0\u1edbc<\/span><\/td>\n<td><span style=\"font-weight: 400;\">H\u1ed7 tr\u1ee3 t\u00f9y ch\u1ec9nh m\u00e0u s\u1eafc, k\u00edch th\u01b0\u1edbc v\u00e0 ki\u1ec3u d\u00e1ng<\/span><\/td>\n<\/tr>\n<tr>\n<td><b>K\u00edch th\u01b0\u1edbc t\u1ec7p<\/b><\/td>\n<td><span style=\"font-weight: 400;\">Nh\u1ecf g\u1ecdn, d\u1ec5 t\u00edch h\u1ee3p<\/span><\/td>\n<td><span style=\"font-weight: 400;\">T\u01b0\u01a1ng \u0111\u1ed1i nh\u1ecf, t\u1ed1i \u01b0u cho \u1ee9ng d\u1ee5ng Material Design<\/span><\/td>\n<td><span style=\"font-weight: 400;\">K\u00edch th\u01b0\u1edbc trung b\u00ecnh, h\u1ed7 tr\u1ee3 nhi\u1ec1u n\u1ec1n t\u1ea3ng<\/span><\/td>\n<\/tr>\n<tr>\n<td><b>S\u1eed d\u1ee5ng v\u1edbi React Native<\/b><\/td>\n<td><span style=\"font-weight: 400;\">D\u1ec5 d\u00e0ng s\u1eed d\u1ee5ng v\u1edbi th\u01b0 vi\u1ec7n <\/span><span style=\"font-weight: 400;\">react-native-vector-icons<\/span><\/td>\n<td><span style=\"font-weight: 400;\">\u0110\u01b0\u1ee3c h\u1ed7 tr\u1ee3 t\u1ed1t th\u00f4ng qua <\/span><span style=\"font-weight: 400;\">react-native-vector-icons<\/span><\/td>\n<td><span style=\"font-weight: 400;\">T\u00edch h\u1ee3p ho\u00e0n ch\u1ec9nh v\u1edbi <\/span><span style=\"font-weight: 400;\">react-native-vector-icons<\/span><\/td>\n<\/tr>\n<tr>\n<td><b>C\u1ed9ng \u0111\u1ed3ng h\u1ed7 tr\u1ee3<\/b><\/td>\n<td><span style=\"font-weight: 400;\">C\u1ed9ng \u0111\u1ed3ng l\u1edbn, t\u00e0i li\u1ec7u phong ph\u00fa<\/span><\/td>\n<td><span style=\"font-weight: 400;\">T\u00e0i li\u1ec7u t\u1ed1t, \u0111\u01b0\u1ee3c h\u1ed7 tr\u1ee3 b\u1edfi Google<\/span><\/td>\n<td><span style=\"font-weight: 400;\">C\u1ed9ng \u0111\u1ed3ng h\u1ed7 tr\u1ee3 t\u1ed1t, nhi\u1ec1u d\u1ef1 \u00e1n m\u00e3 ngu\u1ed3n m\u1edf<\/span><\/td>\n<\/tr>\n<tr>\n<td><b>Nh\u01b0\u1ee3c \u0111i\u1ec3m<\/b><\/td>\n<td><span style=\"font-weight: 400;\">C\u00f3 th\u1ec3 kh\u00f4ng ph\u00f9 h\u1ee3p v\u1edbi phong c\u00e1ch hi\u1ec7n \u0111\u1ea1i<\/span><\/td>\n<td><span style=\"font-weight: 400;\">Ph\u00f9 h\u1ee3p ch\u1ee7 y\u1ebfu v\u1edbi c\u00e1c \u1ee9ng d\u1ee5ng phong c\u00e1ch Google<\/span><\/td>\n<td><span style=\"font-weight: 400;\">M\u1ed9t s\u1ed1 icon \u00edt \u0111\u01b0\u1ee3c s\u1eed d\u1ee5ng trong \u1ee9ng d\u1ee5ng th\u00f4ng th\u01b0\u1eddng<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><span style=\"font-weight: 400;\">B\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng <\/span><b>React Native Vector Icons<\/b><span style=\"font-weight: 400;\">, b\u1ea1n c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng th\u00eam c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng \u0111a d\u1ea1ng v\u00e0o giao di\u1ec7n \u1ee9ng d\u1ee5ng c\u1ee7a m\u00ecnh, t\u00f9y ch\u1ec9nh k\u00edch th\u01b0\u1edbc, m\u00e0u s\u1eafc, v\u00e0 phong c\u00e1ch bi\u1ec3u t\u01b0\u1ee3ng \u0111\u1ec3 ph\u00f9 h\u1ee3p v\u1edbi thi\u1ebft k\u1ebf UI\/UX c\u1ee7a d\u1ef1 \u00e1n. Vi\u1ec7c th\u01b0 vi\u1ec7n n\u00e0y h\u1ed7 tr\u1ee3 nhi\u1ec1u b\u1ed9 bi\u1ec3u t\u01b0\u1ee3ng ph\u1ed5 bi\u1ebfn c\u0169ng gi\u00fap b\u1ea1n c\u00f3 th\u00eam nhi\u1ec1u l\u1ef1a ch\u1ecdn trong qu\u00e1 tr\u00ecnh ph\u00e1t tri\u1ec3n \u1ee9ng d\u1ee5ng.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Dieu_chinh_va_toi_uu_React_Native_Vector_Icons\"><\/span><strong>\u0110i\u1ec1u ch\u1ec9nh v\u00e0 t\u1ed1i \u01b0u React Native Vector Icons<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">S\u1eed d\u1ee5ng <\/span><b>React Native Vector Icons<\/b><span style=\"font-weight: 400;\"> l\u00e0 c\u00e1ch tuy\u1ec7t v\u1eddi \u0111\u1ec3 th\u00eam c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng v\u00e0o \u1ee9ng d\u1ee5ng, nh\u01b0ng b\u1ea1n c\u0169ng c\u00f3 th\u1ec3 c\u1ea7n t\u1ea1o bi\u1ec3u t\u01b0\u1ee3ng t\u00f9y ch\u1ec9nh ho\u1eb7c t\u1ed1i \u01b0u h\u00f3a ch\u00fang \u0111\u1ec3 c\u1ea3i thi\u1ec7n hi\u1ec7u su\u1ea5t \u1ee9ng d\u1ee5ng. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 h\u01b0\u1edbng d\u1eabn chi ti\u1ebft v\u1ec1 c\u00e1ch th\u1ef1c hi\u1ec7n.<\/span><\/p>\n<h3><strong>T\u1ea1o icon t\u00f9y ch\u1ec9nh<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Trong m\u1ed9t s\u1ed1 tr\u01b0\u1eddng h\u1ee3p, c\u00e1c b\u1ed9 bi\u1ec3u t\u01b0\u1ee3ng c\u00f3 s\u1eb5n nh\u01b0 <\/span><b>FontAwesome<\/b><span style=\"font-weight: 400;\"> ho\u1eb7c <\/span><b>MaterialIcons<\/b><span style=\"font-weight: 400;\"> kh\u00f4ng \u0111\u00e1p \u1ee9ng \u0111\u01b0\u1ee3c y\u00eau c\u1ea7u thi\u1ebft k\u1ebf c\u1ee7a b\u1ea1n. Khi \u0111\u00f3, b\u1ea1n c\u00f3 th\u1ec3 t\u1ea1o c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng t\u00f9y ch\u1ec9nh t\u1eeb file <\/span><b>SVG<\/b><span style=\"font-weight: 400;\"> v\u00e0 s\u1eed d\u1ee5ng ch\u00fang trong \u1ee9ng d\u1ee5ng React Native.<\/span><\/p>\n<p><b>H\u01b0\u1edbng d\u1eabn t\u1ea1o icon t\u1eeb SVG v\u00e0 s\u1eed d\u1ee5ng trong React Native<\/b><\/p>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 t\u1ea1o bi\u1ec3u t\u01b0\u1ee3ng t\u00f9y ch\u1ec9nh t\u1eeb SVG, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng th\u01b0 vi\u1ec7n <\/span><b>react-native-svg<\/b><span style=\"font-weight: 400;\">, m\u1ed9t th\u01b0 vi\u1ec7n ph\u1ed5 bi\u1ebfn \u0111\u1ec3 hi\u1ec3n th\u1ecb v\u00e0 x\u1eed l\u00fd file SVG trong React Native.<\/span><\/p>\n<p><b>B\u01b0\u1edbc 1<\/b><span style=\"font-weight: 400;\">: C\u00e0i \u0111\u1eb7t th\u01b0 vi\u1ec7n <\/span><b>react-native-svg<\/b><\/p>\n<p><span style=\"font-weight: 400;\">N\u1ebfu b\u1ea1n ch\u01b0a c\u00f3 th\u01b0 vi\u1ec7n n\u00e0y trong d\u1ef1 \u00e1n, h\u00e3y c\u00e0i \u0111\u1eb7t n\u00f3 b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng npm ho\u1eb7c yarn:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">C\u00e0i \u0111\u1eb7t b\u1eb1ng npm:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">npm install react-native-svg<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">C\u00e0i \u0111\u1eb7t b\u1eb1ng yarn:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">yarn add react-native-svg<\/span><\/pre>\n<p><b>B\u01b0\u1edbc 2<\/b><span style=\"font-weight: 400;\">: C\u00e0i \u0111\u1eb7t th\u01b0 vi\u1ec7n <\/span><b>react-native-svg-transformer<\/b><\/p>\n<p><span style=\"font-weight: 400;\">\u0110\u1ec3 c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng c\u00e1c file SVG nh\u01b0 React component, b\u1ea1n c\u1ea7n c\u00e0i th\u00eam <\/span><b>react-native-svg-transformer<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">npm install --save react-native-svg-transformer<\/span><\/pre>\n<p><b>B\u01b0\u1edbc 3<\/b><span style=\"font-weight: 400;\">: C\u1ea5u h\u00ecnh <\/span><span style=\"font-weight: 400;\">metro.config.js<\/span><\/p>\n<p><span style=\"font-weight: 400;\">B\u1ea1n c\u1ea7n c\u1eadp nh\u1eadt file <\/span><span style=\"font-weight: 400;\">metro.config.js<\/span><span style=\"font-weight: 400;\"> \u0111\u1ec3 chuy\u1ec3n \u0111\u1ed5i c\u00e1c file SVG th\u00e0nh component:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">const { getDefaultConfig } = require('metro-config');<\/span>\r\n\r\n<span style=\"font-weight: 400;\">module.exports = (async () =&gt; {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0const {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0resolver: { sourceExts, assetExts },<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0} = await getDefaultConfig();<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0return {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0transformer: {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0babelTransformerPath: require.resolve('react-native-svg-transformer'),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0},<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0resolver: {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0assetExts: assetExts.filter(ext =&gt; ext !== 'svg'),<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0sourceExts: [...sourceExts, 'svg'],<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0},<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0};<\/span>\r\n<span style=\"font-weight: 400;\">})();<\/span><\/pre>\n<p><b>B\u01b0\u1edbc 4<\/b><span style=\"font-weight: 400;\">: S\u1eed d\u1ee5ng SVG l\u00e0m bi\u1ec3u t\u01b0\u1ee3ng<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Sau khi c\u00e0i \u0111\u1eb7t xong, b\u1ea1n c\u00f3 th\u1ec3 import file SVG nh\u01b0 m\u1ed9t component React Native. V\u00ed d\u1ee5, n\u1ebfu b\u1ea1n c\u00f3 file <\/span><span style=\"font-weight: 400;\">logo.svg<\/span><span style=\"font-weight: 400;\"> trong d\u1ef1 \u00e1n, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng n\u00f3 nh\u01b0 sau:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">import Logo from '.\/assets\/logo.svg';<\/span>\r\n\r\n<span style=\"font-weight: 400;\">const App = () =&gt; {<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0return (<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;View&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0\u00a0\u00a0&lt;Logo width={100} height={100} \/&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0\u00a0\u00a0&lt;\/View&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0);<\/span>\r\n<span style=\"font-weight: 400;\">};<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">B\u1ea1n c\u00f3 th\u1ec3 t\u00f9y ch\u1ec9nh k\u00edch th\u01b0\u1edbc, m\u00e0u s\u1eafc c\u1ee7a SVG tr\u1ef1c ti\u1ebfp trong component nh\u01b0 v\u1edbi b\u1ea5t k\u1ef3 icon n\u00e0o kh\u00e1c.<\/span><\/p>\n<h3><strong>S\u1eed d\u1ee5ng th\u01b0 vi\u1ec7n react-native-svg \u0111\u1ec3 th\u00eam icon t\u00f9y ch\u1ec9nh<\/strong><\/h3>\n<p><b>react-native-svg<\/b><span style=\"font-weight: 400;\"> l\u00e0 m\u1ed9t c\u00f4ng c\u1ee5 m\u1ea1nh m\u1ebd \u0111\u1ec3 hi\u1ec3n th\u1ecb c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng t\u00f9y ch\u1ec9nh t\u1eeb SVG trong React Native.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ngo\u00e0i vi\u1ec7c s\u1eed d\u1ee5ng SVG t\u0129nh, b\u1ea1n c\u00f3 th\u1ec3 d\u1ec5 d\u00e0ng t\u1ea1o ra c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng t\u01b0\u01a1ng t\u00e1c ho\u1eb7c c\u00f3 c\u00e1c hi\u1ec7u \u1ee9ng ho\u1ea1t h\u00ecnh. \u0110i\u1ec1u n\u00e0y gi\u00fap t\u1ed1i \u01b0u h\u00f3a thi\u1ebft k\u1ebf \u1ee9ng d\u1ee5ng, \u0111\u1eb7c bi\u1ec7t khi c\u1ea7n t\u1ea1o ra nh\u1eefng bi\u1ec3u t\u01b0\u1ee3ng c\u00f3 phong c\u00e1ch ri\u00eang bi\u1ec7t v\u00e0 \u0111\u1ed9c \u0111\u00e1o.<\/span><\/p>\n<h3><strong>C\u1ea3i thi\u1ec7n hi\u1ec7u su\u1ea5t<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Vi\u1ec7c s\u1eed d\u1ee5ng qu\u00e1 nhi\u1ec1u bi\u1ec3u t\u01b0\u1ee3ng ho\u1eb7c import to\u00e0n b\u1ed9 c\u00e1c b\u1ed9 icon l\u1edbn c\u00f3 th\u1ec3 \u1ea3nh h\u01b0\u1edfng \u0111\u1ebfn hi\u1ec7u su\u1ea5t c\u1ee7a \u1ee9ng d\u1ee5ng, \u0111\u1eb7c bi\u1ec7t l\u00e0 th\u1eddi gian t\u1ea3i v\u00e0 k\u00edch th\u01b0\u1edbc g\u00f3i c\u00e0i \u0111\u1eb7t (bundle size). D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u1ed9t s\u1ed1 c\u00e1ch t\u1ed1i \u01b0u h\u00f3a vi\u1ec7c s\u1eed d\u1ee5ng icon \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o \u1ee9ng d\u1ee5ng ho\u1ea1t \u0111\u1ed9ng m\u01b0\u1ee3t m\u00e0 h\u01a1n.<\/span><\/p>\n<h3><strong>T\u1ed1i \u01b0u h\u00f3a vi\u1ec7c s\u1eed d\u1ee5ng icon<\/strong><\/h3>\n<h4><b>Lazy loading bi\u1ec3u t\u01b0\u1ee3ng<\/b><\/h4>\n<p><span style=\"font-weight: 400;\">Thay v\u00ec t\u1ea3i t\u1ea5t c\u1ea3 c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng khi \u1ee9ng d\u1ee5ng kh\u1edfi \u0111\u1ed9ng, b\u1ea1n ch\u1ec9 n\u00ean t\u1ea3i nh\u1eefng bi\u1ec3u t\u01b0\u1ee3ng c\u1ea7n thi\u1ebft khi ng\u01b0\u1eddi d\u00f9ng truy c\u1eadp v\u00e0o c\u00e1c m\u00e0n h\u00ecnh c\u1ee5 th\u1ec3. \u0110i\u1ec1u n\u00e0y gi\u00fap gi\u1ea3m th\u1eddi gian kh\u1edfi \u0111\u1ed9ng \u1ee9ng d\u1ee5ng.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">B\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng ph\u01b0\u01a1ng ph\u00e1p <\/span><b>dynamic import<\/b><span style=\"font-weight: 400;\"> \u0111\u1ec3 ch\u1ec9 t\u1ea3i c\u00e1c icon khi c\u1ea7n:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">const Icon = React.lazy(() =&gt; import('react-native-vector-icons\/FontAwesome'));<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;React.Suspense fallback={&lt;Text&gt;Loading icon...&lt;\/Text&gt;}&gt;<\/span>\r\n<span style=\"font-weight: 400;\"> \u00a0&lt;Icon name=\"rocket\" size={30} color=\"#900\" \/&gt;<\/span>\r\n<span style=\"font-weight: 400;\">&lt;\/React.Suspense&gt;<\/span><\/pre>\n<h4><b>T\u1ed1i \u01b0u h\u00f3a k\u00edch th\u01b0\u1edbc bundle<\/b><\/h4>\n<p><span style=\"font-weight: 400;\">Khi s\u1eed d\u1ee5ng c\u00e1c b\u1ed9 th\u01b0 vi\u1ec7n bi\u1ec3u t\u01b0\u1ee3ng l\u1edbn nh\u01b0 <\/span><b>FontAwesome<\/b><span style=\"font-weight: 400;\">, ch\u1ec9 import nh\u1eefng bi\u1ec3u t\u01b0\u1ee3ng m\u00e0 b\u1ea1n th\u1ef1c s\u1ef1 c\u1ea7n thay v\u00ec to\u00e0n b\u1ed9 th\u01b0 vi\u1ec7n. Thay v\u00ec import c\u1ea3 b\u1ed9 icon, b\u1ea1n c\u00f3 th\u1ec3 ch\u1ec9 import c\u00e1c icon ri\u00eang l\u1ebb:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">import { FontAwesomeIcon } from 'react-native-vector-icons\/FontAwesome';<\/span><\/pre>\n<h4><b>Ch\u1ec9 import nh\u1eefng icon c\u1ea7n thi\u1ebft<\/b><\/h4>\n<p><span style=\"font-weight: 400;\">Vi\u1ec7c ch\u1ec9 import nh\u1eefng bi\u1ec3u t\u01b0\u1ee3ng c\u1ea7n thi\u1ebft gi\u00fap gi\u1ea3m k\u00edch th\u01b0\u1edbc bundle, t\u1eeb \u0111\u00f3 c\u1ea3i thi\u1ec7n hi\u1ec7u su\u1ea5t \u1ee9ng d\u1ee5ng. \u0110\u00e2y l\u00e0 m\u1ed9t c\u00e1ch l\u00e0m ph\u1ed5 bi\u1ebfn trong c\u00e1c d\u1ef1 \u00e1n l\u1edbn nh\u1eb1m tr\u00e1nh vi\u1ec7c t\u1ea3i nh\u1eefng ph\u1ea7n kh\u00f4ng c\u1ea7n thi\u1ebft. V\u00ed d\u1ee5:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Thay v\u00ec:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">import Icon from 'react-native-vector-icons\/FontAwesome';<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">H\u00e3y ch\u1ec9 import bi\u1ec3u t\u01b0\u1ee3ng c\u1ee5 th\u1ec3 m\u00e0 b\u1ea1n c\u1ea7n:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">import { FaHome } from 'react-icons\/fa';<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">Ngo\u00e0i ra, b\u1ea1n c\u00f3 th\u1ec3 c\u00e2n nh\u1eafc s\u1eed d\u1ee5ng c\u00e1c c\u00f4ng c\u1ee5 nh\u01b0 <\/span><b>babel-plugin-import<\/b><span style=\"font-weight: 400;\"> \u0111\u1ec3 t\u1ef1 \u0111\u1ed9ng t\u1ed1i \u01b0u h\u00f3a vi\u1ec7c import c\u00e1c th\u01b0 vi\u1ec7n l\u1edbn.<\/span><\/p>\n<p><b>T\u00f3m l\u1ea1i<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Vi\u1ec7c t\u00f9y ch\u1ec9nh v\u00e0 t\u1ed1i \u01b0u h\u00f3a bi\u1ec3u t\u01b0\u1ee3ng kh\u00f4ng ch\u1ec9 gi\u00fap c\u1ea3i thi\u1ec7n thi\u1ebft k\u1ebf c\u1ee7a \u1ee9ng d\u1ee5ng, m\u00e0 c\u00f2n gi\u00fap t\u0103ng hi\u1ec7u su\u1ea5t v\u00e0 tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng. B\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng t\u00f9y ch\u1ec9nh t\u1eeb file SVG v\u00e0 t\u1ed1i \u01b0u h\u00f3a quy tr\u00ecnh t\u1ea3i, b\u1ea1n c\u00f3 th\u1ec3 \u0111\u1ea3m b\u1ea3o \u1ee9ng d\u1ee5ng ch\u1ea1y nhanh h\u01a1n v\u00e0 nh\u1eb9 h\u01a1n, \u0111\u1ed3ng th\u1eddi duy tr\u00ec t\u00ednh th\u1ea9m m\u1ef9 cao.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Cac_van_de_pho_bien_va_cach_khac_phuc_khi_su_dung_React_Native_Vector_Icons\"><\/span><strong>C\u00e1c v\u1ea5n \u0111\u1ec1 ph\u1ed5 bi\u1ebfn v\u00e0 c\u00e1ch kh\u1eafc ph\u1ee5c khi s\u1eed d\u1ee5ng React Native Vector Icons<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Khi s\u1eed d\u1ee5ng <\/span><b>React Native Vector Icons<\/b><span style=\"font-weight: 400;\">, b\u1ea1n c\u00f3 th\u1ec3 g\u1eb7p m\u1ed9t s\u1ed1 v\u1ea5n \u0111\u1ec1 trong vi\u1ec7c hi\u1ec3n th\u1ecb icon, \u0111\u1eb7c bi\u1ec7t l\u00e0 khi l\u00e0m vi\u1ec7c v\u1edbi c\u00e1c ph\u00f4ng ch\u1eef (fonts) tr\u00ean c\u00e1c n\u1ec1n t\u1ea3ng kh\u00e1c nhau nh\u01b0 Android v\u00e0 iOS. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 m\u1ed9t s\u1ed1 l\u01b0u \u00fd v\u00e0 m\u1eb9o h\u1eefu \u00edch \u0111\u1ec3 tr\u00e1nh nh\u1eefng l\u1ed7i ph\u1ed5 bi\u1ebfn, c\u0169ng nh\u01b0 c\u00e1ch kh\u1eafc ph\u1ee5c c\u00e1c v\u1ea5n \u0111\u1ec1 li\u00ean quan \u0111\u1ebfn icon.<\/span><\/p>\n<h3><strong>Icon kh\u00f4ng hi\u1ec3n th\u1ecb<\/strong><\/h3>\n<p><b>Nguy\u00ean nh\u00e2n<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Fonts ch\u01b0a \u0111\u01b0\u1ee3c li\u00ean k\u1ebft \u0111\u00fang c\u00e1ch<\/b><span style=\"font-weight: 400;\">: Tr\u00ean c\u00e1c phi\u00ean b\u1ea3n React Native c\u0169 h\u01a1n (d\u01b0\u1edbi 0.60), b\u1ea1n c\u1ea7n li\u00ean k\u1ebft th\u1ee7 c\u00f4ng c\u00e1c fonts. N\u1ebfu kh\u00f4ng th\u1ef1c hi\u1ec7n \u0111\u00fang, c\u00e1c icon s\u1ebd kh\u00f4ng hi\u1ec3n th\u1ecb.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>T\u00ean icon sai ho\u1eb7c kh\u00f4ng t\u1ed3n t\u1ea1i<\/b><span style=\"font-weight: 400;\">: M\u1ed7i b\u1ed9 icon c\u00f3 danh s\u00e1ch ri\u00eang c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng, n\u1ebfu b\u1ea1n nh\u1eadp sai t\u00ean ho\u1eb7c t\u00ean bi\u1ec3u t\u01b0\u1ee3ng kh\u00f4ng t\u1ed3n t\u1ea1i, icon s\u1ebd kh\u00f4ng hi\u1ec3n th\u1ecb.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Cache c\u1ee7a React Native<\/b><span style=\"font-weight: 400;\">: \u0110\u00f4i khi c\u00e1c thay \u0111\u1ed5i kh\u00f4ng \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng ngay l\u1eadp t\u1ee9c do b\u1ed9 nh\u1edb cache c\u1ee7a React Native.<\/span><\/li>\n<\/ul>\n<p><b>C\u00e1ch kh\u1eafc ph\u1ee5c<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Ki\u1ec3m tra k\u1ef9 t\u00ean bi\u1ec3u t\u01b0\u1ee3ng (icon) c\u00f3 t\u1ed3n t\u1ea1i trong b\u1ed9 icon b\u1ea1n \u0111ang s\u1eed d\u1ee5ng.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">N\u1ebfu bi\u1ec3u t\u01b0\u1ee3ng kh\u00f4ng hi\u1ec3n th\u1ecb, th\u1eed x\u00f3a cache b\u1eb1ng l\u1ec7nh:<\/span><\/li>\n<\/ul>\n<pre><span style=\"font-weight: 400;\">react-native start --reset-cache<\/span><\/pre>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u0110\u1ea3m b\u1ea3o r\u1eb1ng c\u00e1c fonts \u0111\u00e3 \u0111\u01b0\u1ee3c li\u00ean k\u1ebft \u0111\u00fang c\u00e1ch (xem ph\u1ea7n c\u00e0i \u0111\u1eb7t fonts b\u00ean d\u01b0\u1edbi).<\/span><\/li>\n<\/ul>\n<h3><strong>V\u1ea5n \u0111\u1ec1 v\u1edbi fonts tr\u00ean Android<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Tr\u00ean Android, c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng c\u00f3 th\u1ec3 kh\u00f4ng hi\u1ec3n th\u1ecb \u0111\u00fang n\u1ebfu ph\u00f4ng ch\u1eef kh\u00f4ng \u0111\u01b0\u1ee3c c\u1ea5u h\u00ecnh ch\u00ednh x\u00e1c.<\/span><\/p>\n<p><b>Nguy\u00ean nh\u00e2n<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Ph\u00f4ng ch\u1eef (fonts) kh\u00f4ng \u0111\u01b0\u1ee3c li\u00ean k\u1ebft<\/b><span style=\"font-weight: 400;\">: \u0110\u1eb7c bi\u1ec7t tr\u00ean c\u00e1c phi\u00ean b\u1ea3n React Native c\u0169 h\u01a1n ho\u1eb7c khi kh\u00f4ng s\u1eed d\u1ee5ng Expo, b\u1ea1n c\u1ea7n th\u1ef1c hi\u1ec7n li\u00ean k\u1ebft th\u1ee7 c\u00f4ng ph\u00f4ng ch\u1eef.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Thi\u1ebfu quy\u1ec1n<\/b><span style=\"font-weight: 400;\">: Tr\u00ean m\u1ed9t s\u1ed1 thi\u1ebft b\u1ecb Android, c\u00e1c file h\u1ec7 th\u1ed1ng c\u00f3 th\u1ec3 kh\u00f4ng \u0111\u01b0\u1ee3c c\u1ea5p quy\u1ec1n \u0111\u1ec3 s\u1eed d\u1ee5ng c\u00e1c font icon.<\/span><\/li>\n<\/ul>\n<p><b>C\u00e1ch kh\u1eafc ph\u1ee5c<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Ki\u1ec3m tra c\u1ea5u h\u00ecnh fonts trong file <\/span><span style=\"font-weight: 400;\">android\/app\/build.gradle<\/span><span style=\"font-weight: 400;\"> (h\u01b0\u1edbng d\u1eabn chi ti\u1ebft b\u00ean d\u01b0\u1edbi).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u0110\u1ea3m b\u1ea3o r\u1eb1ng c\u00e1c file <\/span><span style=\"font-weight: 400;\">.ttf<\/span><span style=\"font-weight: 400;\"> (font) \u0111\u00e3 \u0111\u01b0\u1ee3c sao ch\u00e9p v\u00e0o \u0111\u00fang th\u01b0 m\u1ee5c.<\/span><\/li>\n<\/ul>\n<h3><strong>V\u1ea5n \u0111\u1ec1 v\u1edbi fonts tr\u00ean iOS<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">Tr\u00ean iOS, c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng c\u00f3 th\u1ec3 kh\u00f4ng xu\u1ea5t hi\u1ec7n n\u1ebfu ph\u00f4ng ch\u1eef ch\u01b0a \u0111\u01b0\u1ee3c th\u00eam v\u00e0o d\u1ef1 \u00e1n Xcode ho\u1eb7c ch\u01b0a \u0111\u01b0\u1ee3c c\u1ea5u h\u00ecnh \u0111\u00fang.<\/span><\/p>\n<p><b>Nguy\u00ean nh\u00e2n<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Fonts ch\u01b0a \u0111\u01b0\u1ee3c th\u00eam v\u00e0o trong Xcode<\/b><span style=\"font-weight: 400;\">: B\u1ea1n c\u1ea7n ph\u1ea3i th\u00eam th\u1ee7 c\u00f4ng c\u00e1c file <\/span><span style=\"font-weight: 400;\">.ttf<\/span><span style=\"font-weight: 400;\"> v\u00e0o d\u1ef1 \u00e1n v\u00e0 x\u00e1c nh\u1eadn r\u1eb1ng ch\u00fang \u0111\u01b0\u1ee3c li\u1ec7t k\u00ea trong ph\u1ea7n <\/span><b>Copy Bundle Resources<\/b><span style=\"font-weight: 400;\"> c\u1ee7a Xcode.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Fonts ch\u01b0a \u0111\u01b0\u1ee3c khai b\u00e1o trong file <\/b><b>Info.plist<\/b><span style=\"font-weight: 400;\">.<\/span><\/li>\n<\/ul>\n<p><b>C\u00e1ch kh\u1eafc ph\u1ee5c<\/b><span style=\"font-weight: 400;\">:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u0110\u1ea3m b\u1ea3o c\u00e1c file <\/span><span style=\"font-weight: 400;\">.ttf<\/span><span style=\"font-weight: 400;\"> \u0111\u00e3 \u0111\u01b0\u1ee3c th\u00eam v\u00e0o d\u1ef1 \u00e1n v\u00e0 th\u00eam ch\u00fang v\u00e0o <\/span><b>Build Phases &gt; Copy Bundle Resources<\/b><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">C\u1eadp nh\u1eadt file <\/span><span style=\"font-weight: 400;\">Info.plist<\/span><span style=\"font-weight: 400;\"> \u0111\u1ec3 khai b\u00e1o c\u00e1c ph\u00f4ng ch\u1eef.<\/span><\/li>\n<\/ul>\n<h3><b>H\u01b0\u1edbng d\u1eabn c\u00e0i \u0111\u1eb7t icon fonts cho Android v\u00e0 iOS (n\u1ebfu kh\u00f4ng s\u1eed d\u1ee5ng Expo)<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Khi kh\u00f4ng s\u1eed d\u1ee5ng <\/span><b>Expo<\/b><span style=\"font-weight: 400;\">, b\u1ea1n c\u1ea7n t\u1ef1 c\u1ea5u h\u00ecnh ph\u00f4ng ch\u1eef (fonts) th\u1ee7 c\u00f4ng tr\u00ean c\u1ea3 Android v\u00e0 iOS \u0111\u1ec3 bi\u1ec3u t\u01b0\u1ee3ng hi\u1ec3n th\u1ecb \u0111\u00fang. D\u01b0\u1edbi \u0111\u00e2y l\u00e0 c\u00e1c b\u01b0\u1edbc chi ti\u1ebft \u0111\u1ec3 c\u00e0i \u0111\u1eb7t icon fonts.<\/span><\/p>\n<h4><b>C\u00e0i \u0111\u1eb7t icon fonts cho Android<\/b><\/h4>\n<p><b>B\u01b0\u1edbc 1<\/b><span style=\"font-weight: 400;\">: M\u1edf file <\/span><span style=\"font-weight: 400;\">android\/app\/build.gradle<\/span><span style=\"font-weight: 400;\"> v\u00e0 th\u00eam d\u00f2ng sau v\u00e0o cu\u1ed1i file \u0111\u1ec3 li\u00ean k\u1ebft ph\u00f4ng ch\u1eef icon:<\/span><\/p>\n<pre><span style=\"font-weight: 400;\">apply from: \"..\/..\/node_modules\/react-native-vector-icons\/fonts.gradle\"<\/span><\/pre>\n<p><span style=\"font-weight: 400;\">D\u00f2ng l\u1ec7nh n\u00e0y \u0111\u1ea3m b\u1ea3o r\u1eb1ng Gradle s\u1ebd t\u1ef1 \u0111\u1ed9ng sao ch\u00e9p c\u00e1c file ph\u00f4ng ch\u1eef t\u1eeb th\u01b0 vi\u1ec7n <\/span><b>react-native-vector-icons<\/b><span style=\"font-weight: 400;\"> v\u00e0o th\u01b0 m\u1ee5c t\u00e0i nguy\u00ean (assets) c\u1ee7a \u1ee9ng d\u1ee5ng.<\/span><\/p>\n<p><b>B\u01b0\u1edbc 2<\/b><span style=\"font-weight: 400;\">: X\u00e1c nh\u1eadn r\u1eb1ng c\u00e1c file ph\u00f4ng ch\u1eef \u0111\u00e3 \u0111\u01b0\u1ee3c sao ch\u00e9p v\u00e0o th\u01b0 m\u1ee5c <\/span><span style=\"font-weight: 400;\">android\/app\/src\/main\/assets\/fonts<\/span><span style=\"font-weight: 400;\">. N\u1ebfu kh\u00f4ng th\u1ea5y th\u01b0 m\u1ee5c <\/span><span style=\"font-weight: 400;\">assets\/fonts<\/span><span style=\"font-weight: 400;\">, b\u1ea1n c\u00f3 th\u1ec3 t\u1ea1o th\u1ee7 c\u00f4ng v\u00e0 sao ch\u00e9p c\u00e1c file <\/span><span style=\"font-weight: 400;\">.ttf<\/span><span style=\"font-weight: 400;\"> t\u1eeb th\u01b0 m\u1ee5c <\/span><span style=\"font-weight: 400;\">node_modules\/react-native-vector-icons\/Fonts<\/span><span style=\"font-weight: 400;\"> v\u00e0o \u0111\u00e2y.<\/span><\/p>\n<p><b>B\u01b0\u1edbc 3<\/b><span style=\"font-weight: 400;\">: Build l\u1ea1i \u1ee9ng d\u1ee5ng sau khi ho\u00e0n th\u00e0nh c\u00e1c b\u01b0\u1edbc tr\u00ean \u0111\u1ec3 \u0111\u1ea3m b\u1ea3o m\u1ecdi thay \u0111\u1ed5i \u0111\u01b0\u1ee3c \u00e1p d\u1ee5ng.<\/span><\/p>\n<h4><b>C\u00e0i \u0111\u1eb7t icon fonts cho iOS<\/b><\/h4>\n<p><b>B\u01b0\u1edbc 1<\/b><span style=\"font-weight: 400;\">: M\u1edf d\u1ef1 \u00e1n trong <\/span><b>Xcode<\/b><span style=\"font-weight: 400;\"> b\u1eb1ng c\u00e1ch \u0111i\u1ec1u h\u01b0\u1edbng v\u00e0o th\u01b0 m\u1ee5c <\/span><span style=\"font-weight: 400;\">ios<\/span><span style=\"font-weight: 400;\"> v\u00e0 m\u1edf file <\/span><span style=\"font-weight: 400;\">.xcworkspace<\/span><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><b>B\u01b0\u1edbc 2<\/b><span style=\"font-weight: 400;\">: Th\u00eam c\u00e1c file ph\u00f4ng ch\u1eef v\u00e0o d\u1ef1 \u00e1n:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Trong Xcode, click chu\u1ed9t ph\u1ea3i v\u00e0o <\/span><b>Your Project &gt; Add Files to &#8220;Your Project&#8221;<\/b><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">\u0110i\u1ec1u h\u01b0\u1edbng \u0111\u1ebfn th\u01b0 m\u1ee5c <\/span><span style=\"font-weight: 400;\">node_modules\/react-native-vector-icons\/Fonts<\/span><span style=\"font-weight: 400;\">, ch\u1ecdn t\u1ea5t c\u1ea3 c\u00e1c file <\/span><span style=\"font-weight: 400;\">.ttf<\/span><span style=\"font-weight: 400;\"> v\u00e0 th\u00eam v\u00e0o d\u1ef1 \u00e1n.<\/span><\/li>\n<\/ul>\n<p><b>B\u01b0\u1edbc 3<\/b><span style=\"font-weight: 400;\">: Sau khi th\u00eam c\u00e1c file <\/span><span style=\"font-weight: 400;\">.ttf<\/span><span style=\"font-weight: 400;\">, b\u1ea1n c\u1ea7n th\u00eam ch\u00fang v\u00e0o <\/span><b>Copy Bundle Resources<\/b><span style=\"font-weight: 400;\"> trong Xcode:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">M\u1edf <\/span><b>Your Project &gt; Build Phases &gt; Copy Bundle Resources<\/b><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Nh\u1ea5n v\u00e0o d\u1ea5u <\/span><span style=\"font-weight: 400;\">+<\/span><span style=\"font-weight: 400;\"> v\u00e0 th\u00eam t\u1ea5t c\u1ea3 c\u00e1c file <\/span><span style=\"font-weight: 400;\">.ttf<\/span><span style=\"font-weight: 400;\"> \u0111\u00e3 import.<\/span><\/li>\n<\/ul>\n<p><b>B\u01b0\u1edbc 4<\/b><span style=\"font-weight: 400;\">: C\u1eadp nh\u1eadt file <\/span><span style=\"font-weight: 400;\">Info.plist<\/span><span style=\"font-weight: 400;\">:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">M\u1edf file <\/span><span style=\"font-weight: 400;\">Info.plist<\/span><span style=\"font-weight: 400;\"> trong Xcode.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Th\u00eam m\u1ed9t d\u00f2ng m\u1edbi v\u1edbi key l\u00e0 <\/span><b>Fonts provided by application<\/b><span style=\"font-weight: 400;\"> v\u00e0 th\u00eam t\u00ean c\u00e1c file <\/span><span style=\"font-weight: 400;\">.ttf<\/span><span style=\"font-weight: 400;\"> \u0111\u00e3 th\u00eam v\u00e0o d\u1ef1 \u00e1n.<\/span><\/li>\n<\/ul>\n<p><b>V\u00ed d\u1ee5:<\/b><\/p>\n<pre><span style=\"font-weight: 400;\">&lt;key&gt;UIAppFonts&lt;\/key&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;array&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;string&gt;FontAwesome.ttf&lt;\/string&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">\u00a0\u00a0&lt;string&gt;MaterialIcons.ttf&lt;\/string&gt;<\/span>\r\n\r\n<span style=\"font-weight: 400;\">&lt;\/array&gt;<\/span><\/pre>\n<p><b>B\u01b0\u1edbc 5<\/b><span style=\"font-weight: 400;\">: Build l\u1ea1i \u1ee9ng d\u1ee5ng b\u1eb1ng c\u00e1ch s\u1eed d\u1ee5ng Xcode.<\/span><\/p>\n<p><b>T\u00f3m l\u1ea1i<\/b><\/p>\n<p><span style=\"font-weight: 400;\">Vi\u1ec7c s\u1eed d\u1ee5ng <\/span><b>React Native Vector Icons<\/b><span style=\"font-weight: 400;\"> c\u00f3 th\u1ec3 r\u1ea5t d\u1ec5 d\u00e0ng v\u00e0 h\u1eefu \u00edch khi b\u1ea1n c\u1ea7n c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng \u0111\u1eb9p m\u1eaft trong \u1ee9ng d\u1ee5ng. Tuy nhi\u00ean, \u0111\u1ec3 tr\u00e1nh c\u00e1c v\u1ea5n \u0111\u1ec1 ph\u1ed5 bi\u1ebfn v\u00e0 t\u1ed1i \u01b0u h\u00f3a hi\u1ec7u su\u1ea5t, vi\u1ec7c hi\u1ec3u r\u00f5 c\u00e1ch c\u00e0i \u0111\u1eb7t ph\u00f4ng ch\u1eef cho Android v\u00e0 iOS (\u0111\u1eb7c bi\u1ec7t khi kh\u00f4ng s\u1eed d\u1ee5ng Expo) l\u00e0 r\u1ea5t quan tr\u1ecdng.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">V\u1edbi c\u00e1c m\u1eb9o v\u00e0 h\u01b0\u1edbng d\u1eabn \u1edf tr\u00ean, b\u1ea1n c\u00f3 th\u1ec3 kh\u1eafc ph\u1ee5c nhanh ch\u00f3ng c\u00e1c l\u1ed7i v\u00e0 \u0111\u1ea3m b\u1ea3o \u1ee9ng d\u1ee5ng c\u1ee7a m\u00ecnh ch\u1ea1y m\u01b0\u1ee3t m\u00e0 tr\u00ean m\u1ecdi n\u1ec1n t\u1ea3ng.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Cac_cau_hoi_thuong_gap_ve_React_Native_Vector_Icons\"><\/span><strong>C\u00e1c c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p v\u1ec1 React Native Vector Icons<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><strong>T\u00f4i c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng c\u00e1c b\u1ed9 icon kh\u00e1c ngo\u00e0i FontAwesome v\u00e0 MaterialIcons kh\u00f4ng?<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">C\u00f3. <\/span><b>React Native Vector Icons<\/b><span style=\"font-weight: 400;\"> h\u1ed7 tr\u1ee3 nhi\u1ec1u b\u1ed9 icon kh\u00e1c nh\u01b0 Ionicons, SimpleLineIcons, EvilIcons, v\u00e0 nhi\u1ec1u b\u1ed9 kh\u00e1c. B\u1ea1n ch\u1ec9 c\u1ea7n import \u0111\u00fang b\u1ed9 icon b\u1ea1n mu\u1ed1n s\u1eed d\u1ee5ng.<\/span><\/p>\n<h3><strong>C\u00e1ch x\u1eed l\u00fd l\u1ed7i &#8220;Font Awesome 5 Pro icons not displaying&#8221;?<\/strong><\/h3>\n<p><span style=\"font-weight: 400;\">N\u1ebfu b\u1ea1n s\u1eed d\u1ee5ng phi\u00ean b\u1ea3n Pro c\u1ee7a FontAwesome, b\u1ea1n c\u1ea7n c\u1ea5u h\u00ecnh th\u00eam t\u00e0i kho\u1ea3n v\u00e0 c\u00f3 th\u1ec3 c\u1ea7n t\u1ea3i th\u01b0 vi\u1ec7n ri\u00eang c\u1ee7a Font Awesome 5 Pro \u0111\u1ec3 s\u1eed d\u1ee5ng c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng n\u00e0y. H\u00e3y tham kh\u1ea3o t\u00e0i li\u1ec7u ch\u00ednh th\u1ee9c c\u1ee7a FontAwesome \u0111\u1ec3 bi\u1ebft chi ti\u1ebft.<\/span><\/p>\n<h3><strong>L\u00e0m th\u1ebf n\u00e0o \u0111\u1ec3 kh\u1eafc ph\u1ee5c l\u1ed7i li\u00ean quan \u0111\u1ebfn fonts tr\u00ean Android ho\u1eb7c iOS?<\/strong><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Tr\u00ean Android<\/b><span style=\"font-weight: 400;\">: \u0110\u1ea3m b\u1ea3o r\u1eb1ng c\u00e1c fonts \u0111\u00e3 \u0111\u01b0\u1ee3c li\u00ean k\u1ebft \u0111\u00fang c\u00e1ch trong file <\/span><span style=\"font-weight: 400;\">build.gradle<\/span><span style=\"font-weight: 400;\"> v\u00e0 th\u01b0 m\u1ee5c <\/span><span style=\"font-weight: 400;\">assets\/fonts<\/span><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Tr\u00ean iOS<\/b><span style=\"font-weight: 400;\">: \u0110\u1ea3m b\u1ea3o r\u1eb1ng c\u00e1c file <\/span><span style=\"font-weight: 400;\">.ttf<\/span><span style=\"font-weight: 400;\"> \u0111\u00e3 \u0111\u01b0\u1ee3c th\u00eam v\u00e0o <\/span><b>Copy Bundle Resources<\/b><span style=\"font-weight: 400;\"> trong Xcode v\u00e0 khai b\u00e1o trong file <\/span><span style=\"font-weight: 400;\">Info.plist<\/span><span style=\"font-weight: 400;\">.<\/span><\/li>\n<\/ul>\n<h3><b>M\u1eb9o h\u1eefu \u00edch khi s\u1eed d\u1ee5ng React Native Vector Icons l\u00e0 g\u00ec?<\/b><\/h3>\n<ul>\n<li><span style=\"font-weight: 400;\"><strong>Ch\u1ec9 import nh\u1eefng bi\u1ec3u t\u01b0\u1ee3ng c\u1ea7n thi\u1ebft<\/strong>: Thay v\u00ec import to\u00e0n b\u1ed9 b\u1ed9 icon, b\u1ea1n n\u00ean ch\u1ec9 import nh\u1eefng bi\u1ec3u t\u01b0\u1ee3ng m\u00e0 b\u1ea1n th\u1ef1c s\u1ef1 s\u1eed d\u1ee5ng \u0111\u1ec3 gi\u1ea3m k\u00edch th\u01b0\u1edbc bundle v\u00e0 c\u1ea3i thi\u1ec7n hi\u1ec7u su\u1ea5t.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/li>\n<li><span style=\"font-weight: 400;\">\u200b\u200b<\/span><b>Lazy loading icon<\/b><span style=\"font-weight: 400;\">: N\u1ebfu \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n s\u1eed d\u1ee5ng nhi\u1ec1u icon \u1edf nhi\u1ec1u m\u00e0n h\u00ecnh kh\u00e1c nhau, b\u1ea1n c\u00f3 th\u1ec3 s\u1eed d\u1ee5ng lazy loading \u0111\u1ec3 ch\u1ec9 t\u1ea3i bi\u1ec3u t\u01b0\u1ee3ng khi c\u1ea7n thi\u1ebft.<\/span><\/li>\n<li><b>Ki\u1ec3m tra v\u00e0 c\u1eadp nh\u1eadt th\u01b0\u1eddng xuy\u00ean<\/b><span style=\"font-weight: 400;\">: \u0110\u1ea3m b\u1ea3o r\u1eb1ng th\u01b0 vi\u1ec7n <\/span><span style=\"font-weight: 400;\">react-native-vector-icons<\/span><span style=\"font-weight: 400;\"> lu\u00f4n \u0111\u01b0\u1ee3c c\u1eadp nh\u1eadt \u0111\u1ec3 tr\u00e1nh c\u00e1c v\u1ea5n \u0111\u1ec1 li\u00ean quan \u0111\u1ebfn phi\u00ean b\u1ea3n kh\u00f4ng t\u01b0\u01a1ng th\u00edch v\u1edbi phi\u00ean b\u1ea3n React Native b\u1ea1n \u0111ang s\u1eed d\u1ee5ng.<\/span><\/li>\n<li><b>S\u1eed d\u1ee5ng fonts t\u00f9y ch\u1ec9nh khi c\u1ea7n<\/b><span style=\"font-weight: 400;\">: N\u1ebfu c\u00e1c b\u1ed9 icon c\u00f3 s\u1eb5n kh\u00f4ng ph\u00f9 h\u1ee3p v\u1edbi thi\u1ebft k\u1ebf \u1ee9ng d\u1ee5ng c\u1ee7a b\u1ea1n, h\u00e3y xem x\u00e9t vi\u1ec7c s\u1eed d\u1ee5ng c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng t\u00f9y ch\u1ec9nh t\u1eeb file SVG ho\u1eb7c c\u00e1c b\u1ed9 icon kh\u00e1c.<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Tong_ket_React_Native_Vector_Icons\"><\/span><strong>T\u1ed5ng k\u1ebft React Native Vector Icons<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><b>React Native Vector Icons<\/b><span style=\"font-weight: 400;\"> l\u00e0 m\u1ed9t th\u01b0 vi\u1ec7n m\u1ea1nh m\u1ebd v\u00e0 linh ho\u1ea1t, cung c\u1ea5p kh\u1ea3 n\u0103ng t\u00edch h\u1ee3p c\u00e1c bi\u1ec3u t\u01b0\u1ee3ng vector \u0111\u1eb9p m\u1eaft v\u00e0 chuy\u00ean nghi\u1ec7p v\u00e0o \u1ee9ng d\u1ee5ng React Native. Nh\u1edd v\u00e0o vi\u1ec7c h\u1ed7 tr\u1ee3 nhi\u1ec1u b\u1ed9 icon n\u1ed5i ti\u1ebfng nh\u01b0 FontAwesome, MaterialIcons v\u00e0 Ionicons, th\u01b0 vi\u1ec7n n\u00e0y mang l\u1ea1i s\u1ef1 ti\u1ec7n l\u1ee3i v\u00e0 d\u1ec5 s\u1eed d\u1ee5ng cho c\u00e1c nh\u00e0 ph\u00e1t tri\u1ec3n, cho ph\u00e9p t\u00f9y ch\u1ec9nh d\u1ec5 d\u00e0ng v\u1ec1 k\u00edch th\u01b0\u1edbc, m\u00e0u s\u1eafc v\u00e0 phong c\u00e1ch.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Vi\u1ec7c hi\u1ec3u r\u00f5 c\u00e1ch c\u00e0i \u0111\u1eb7t, li\u00ean k\u1ebft ph\u00f4ng ch\u1eef tr\u00ean Android v\u00e0 iOS c\u0169ng nh\u01b0 t\u1ed1i \u01b0u h\u00f3a hi\u1ec7u su\u1ea5t s\u1ebd gi\u00fap b\u1ea1n tr\u00e1nh c\u00e1c v\u1ea5n \u0111\u1ec1 ph\u1ed5 bi\u1ebfn v\u00e0 t\u0103ng c\u01b0\u1eddng tr\u1ea3i nghi\u1ec7m ng\u01b0\u1eddi d\u00f9ng. B\u1eb1ng c\u00e1ch \u00e1p d\u1ee5ng c\u00e1c m\u1eb9o h\u1eefu \u00edch v\u00e0 t\u1eadn d\u1ee5ng kh\u1ea3 n\u0103ng t\u1ea1o icon t\u00f9y ch\u1ec9nh, b\u1ea1n c\u00f3 th\u1ec3 l\u00e0m phong ph\u00fa th\u00eam giao di\u1ec7n \u1ee9ng d\u1ee5ng c\u1ee7a m\u00ecnh, \u0111\u1ed3ng th\u1eddi \u0111\u1ea3m b\u1ea3o hi\u1ec7u su\u1ea5t t\u1ed1t nh\u1ea5t.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">D\u00f9 b\u1ea1n \u0111ang x\u00e2y d\u1ef1ng \u1ee9ng d\u1ee5ng nh\u1ecf hay d\u1ef1 \u00e1n l\u1edbn, <\/span><b>React Native Vector Icons<\/b><span style=\"font-weight: 400;\"> l\u00e0 m\u1ed9t c\u00f4ng c\u1ee5 kh\u00f4ng th\u1ec3 thi\u1ebfu trong vi\u1ec7c t\u1ea1o ra nh\u1eefng \u1ee9ng d\u1ee5ng hi\u1ec7n \u0111\u1ea1i, th\u00e2n thi\u1ec7n v\u1edbi ng\u01b0\u1eddi d\u00f9ng.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>React Native Vector Icons l\u00e0 m\u1ed9t th\u01b0 vi\u1ec7n v\u00f4 c\u00f9ng h\u1eefu \u00edch gi\u00fap c\u00e1c nh\u00e0 ph\u00e1t tri\u1ec3n React Native d\u1ec5 d\u00e0ng th\u00eam c\u00e1c icon v\u00e0o \u1ee9ng d\u1ee5ng c\u1ee7a m\u00ecnh. V\u1edbi h\u00e0ng tr\u0103m icon \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf s\u1eb5n t\u1eeb nhi\u1ec1u b\u1ed9 icon ph\u1ed5 bi\u1ebfn, b\u1ea1n c\u00f3 th\u1ec3 tha h\u1ed3 l\u1ef1a ch\u1ecdn v\u00e0 t\u00f9y ch\u1ec9nh \u0111\u1ec3 t\u1ea1o [&hellip;]<\/p>\n","protected":false},"author":203,"featured_media":79566,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_gspb_post_css":"","footnotes":""},"categories":[109],"tags":[],"class_list":["post-79381","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chuyen-mon-it"],"blocksy_meta":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.8 (Yoast SEO v27.8) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>React Native Vector Icons: H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng v\u00e0 c\u00e1c m\u1eb9o hay - ITviec Blog<\/title>\n<meta name=\"description\" content=\"V\u1edbi h\u00e0ng tr\u0103m icon \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf s\u1eb5n t\u1eeb nhi\u1ec1u b\u1ed9 icon, React Native Vector Icons c\u00f3 th\u1ec3 gi\u00fap b\u1ea1n t\u00f9y ch\u1ec9nh \u0111\u1ec3 t\u1ea1o ra giao di\u1ec7n \u0111\u1ed9c \u0111\u00e1o.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/itviec.com\/blog\/react-native-vector-icons-la-gi\/\" \/>\n<meta property=\"og:locale\" content=\"vi_VN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Native Vector Icons: H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng v\u00e0 c\u00e1c m\u1eb9o hay\" \/>\n<meta property=\"og:description\" content=\"React Native Vector Icons l\u00e0 m\u1ed9t th\u01b0 vi\u1ec7n v\u00f4 c\u00f9ng h\u1eefu \u00edch gi\u00fap c\u00e1c nh\u00e0 ph\u00e1t tri\u1ec3n React Native d\u1ec5 d\u00e0ng th\u00eam c\u00e1c icon v\u00e0o \u1ee9ng d\u1ee5ng c\u1ee7a m\u00ecnh. V\u1edbi h\u00e0ng tr\u0103m\" \/>\n<meta property=\"og:url\" content=\"https:\/\/itviec.com\/blog\/react-native-vector-icons-la-gi\/\" \/>\n<meta property=\"og:site_name\" content=\"ITviec Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/ITviec\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-30T16:05:21+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/09\/React-Native-Vector-Icons-vippro.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1500\" \/>\n\t<meta property=\"og:image:height\" content=\"790\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Tien Tran\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ITviec\" \/>\n<meta name=\"twitter:site\" content=\"@ITviec\" \/>\n<meta name=\"twitter:label1\" content=\"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi\" \/>\n\t<meta name=\"twitter:data1\" content=\"Tien Tran\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc\" \/>\n\t<meta name=\"twitter:data2\" content=\"24 ph\u00fat\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"React Native Vector Icons: H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng v\u00e0 c\u00e1c m\u1eb9o hay - ITviec Blog","description":"V\u1edbi h\u00e0ng tr\u0103m icon \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf s\u1eb5n t\u1eeb nhi\u1ec1u b\u1ed9 icon, React Native Vector Icons c\u00f3 th\u1ec3 gi\u00fap b\u1ea1n t\u00f9y ch\u1ec9nh \u0111\u1ec3 t\u1ea1o ra giao di\u1ec7n \u0111\u1ed9c \u0111\u00e1o.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/itviec.com\/blog\/react-native-vector-icons-la-gi\/","og_locale":"vi_VN","og_type":"article","og_title":"React Native Vector Icons: H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng v\u00e0 c\u00e1c m\u1eb9o hay","og_description":"React Native Vector Icons l\u00e0 m\u1ed9t th\u01b0 vi\u1ec7n v\u00f4 c\u00f9ng h\u1eefu \u00edch gi\u00fap c\u00e1c nh\u00e0 ph\u00e1t tri\u1ec3n React Native d\u1ec5 d\u00e0ng th\u00eam c\u00e1c icon v\u00e0o \u1ee9ng d\u1ee5ng c\u1ee7a m\u00ecnh. V\u1edbi h\u00e0ng tr\u0103m","og_url":"https:\/\/itviec.com\/blog\/react-native-vector-icons-la-gi\/","og_site_name":"ITviec Blog","article_publisher":"https:\/\/www.facebook.com\/ITviec","article_published_time":"2024-09-30T16:05:21+00:00","og_image":[{"width":1500,"height":790,"url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/09\/React-Native-Vector-Icons-vippro.jpg","type":"image\/jpeg"}],"author":"Tien Tran","twitter_card":"summary_large_image","twitter_creator":"@ITviec","twitter_site":"@ITviec","twitter_misc":{"\u0110\u01b0\u1ee3c vi\u1ebft b\u1edfi":"Tien Tran","\u01af\u1edbc t\u00ednh th\u1eddi gian \u0111\u1ecdc":"24 ph\u00fat"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/itviec.com\/blog\/react-native-vector-icons-la-gi\/#article","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/react-native-vector-icons-la-gi\/"},"author":{"name":"Tien Tran","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/1595d671c49cfa2a48cd3c0a047a1298"},"headline":"React Native Vector Icons: H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng v\u00e0 c\u00e1c m\u1eb9o hay","datePublished":"2024-09-30T16:05:21+00:00","mainEntityOfPage":{"@id":"https:\/\/itviec.com\/blog\/react-native-vector-icons-la-gi\/"},"wordCount":6311,"publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"image":{"@id":"https:\/\/itviec.com\/blog\/react-native-vector-icons-la-gi\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/09\/React-Native-Vector-Icons-vippro.jpg","articleSection":["Chuy\u00ean m\u00f4n IT"],"inLanguage":"vi"},{"@type":"WebPage","@id":"https:\/\/itviec.com\/blog\/react-native-vector-icons-la-gi\/","url":"https:\/\/itviec.com\/blog\/react-native-vector-icons-la-gi\/","name":"React Native Vector Icons: H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng v\u00e0 c\u00e1c m\u1eb9o hay - ITviec Blog","isPartOf":{"@id":"https:\/\/itviec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/itviec.com\/blog\/react-native-vector-icons-la-gi\/#primaryimage"},"image":{"@id":"https:\/\/itviec.com\/blog\/react-native-vector-icons-la-gi\/#primaryimage"},"thumbnailUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/09\/React-Native-Vector-Icons-vippro.jpg","datePublished":"2024-09-30T16:05:21+00:00","description":"V\u1edbi h\u00e0ng tr\u0103m icon \u0111\u01b0\u1ee3c thi\u1ebft k\u1ebf s\u1eb5n t\u1eeb nhi\u1ec1u b\u1ed9 icon, React Native Vector Icons c\u00f3 th\u1ec3 gi\u00fap b\u1ea1n t\u00f9y ch\u1ec9nh \u0111\u1ec3 t\u1ea1o ra giao di\u1ec7n \u0111\u1ed9c \u0111\u00e1o.","breadcrumb":{"@id":"https:\/\/itviec.com\/blog\/react-native-vector-icons-la-gi\/#breadcrumb"},"inLanguage":"vi","potentialAction":[{"@type":"ReadAction","target":["https:\/\/itviec.com\/blog\/react-native-vector-icons-la-gi\/"]}]},{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/react-native-vector-icons-la-gi\/#primaryimage","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/09\/React-Native-Vector-Icons-vippro.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/09\/React-Native-Vector-Icons-vippro.jpg","width":1500,"height":790},{"@type":"BreadcrumbList","@id":"https:\/\/itviec.com\/blog\/react-native-vector-icons-la-gi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Chuy\u00ean m\u00f4n IT","item":"https:\/\/itviec.com\/blog\/chuyen-mon-it\/"},{"@type":"ListItem","position":2,"name":"React Native Vector Icons: H\u01b0\u1edbng d\u1eabn s\u1eed d\u1ee5ng v\u00e0 c\u00e1c m\u1eb9o hay"}]},{"@type":"WebSite","@id":"https:\/\/itviec.com\/blog\/#website","url":"https:\/\/itviec.com\/blog\/","name":"ITviec Blog","description":"IT Jobs &amp; People in Vietnam","publisher":{"@id":"https:\/\/itviec.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/itviec.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"vi"},{"@type":"Organization","@id":"https:\/\/itviec.com\/blog\/#organization","name":"ITviec","url":"https:\/\/itviec.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2018\/12\/itviec-black-square-facebook.png","width":1800,"height":1800,"caption":"ITviec"},"image":{"@id":"https:\/\/itviec.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/ITviec","https:\/\/x.com\/ITviec","https:\/\/www.linkedin.com\/company\/itviec","https:\/\/www.youtube.com\/channel\/UCYthAQ3bcGr57M_ag5gHDvQ"]},{"@type":"Person","@id":"https:\/\/itviec.com\/blog\/#\/schema\/person\/1595d671c49cfa2a48cd3c0a047a1298","name":"Tien Tran","image":{"@type":"ImageObject","inLanguage":"vi","@id":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/tien-tran-author-e1715658627643-100x100.jpg","url":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/tien-tran-author-e1715658627643-100x100.jpg","contentUrl":"https:\/\/itviec.com\/blog\/wp-content\/uploads\/2024\/05\/tien-tran-author-e1715658627643-100x100.jpg","caption":"Tien Tran"},"url":"https:\/\/itviec.com\/blog\/author\/tien-tran\/"}]}},"_links":{"self":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/79381","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/users\/203"}],"replies":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/comments?post=79381"}],"version-history":[{"count":0,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/posts\/79381\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media\/79566"}],"wp:attachment":[{"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/media?parent=79381"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/categories?post=79381"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itviec.com\/blog\/wp-json\/wp\/v2\/tags?post=79381"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}