With this code snippet, you can use Ionicons in your React + TypeScript project with code completion and without any errors from React side.
- Copy the content of the
ion-icons.d.tsfile. - Add scripts inside your
<head>tags.
<head>
| #!/bin/zsh | |
| # A small command line tool for easier development on [`refine`](https://refine.dev) | |
| version="1.7.0" | |
| name="\e[35m[refine-development]\e[0m" | |
| all_args=("$@") | |
| first_arg="$1" | |
| scopes_array=() |
| /* | |
| * Using destructuring, we can remove a dynamic key from an object without `delete` keyword in one line. | |
| */ | |
| const baseObj = { a: 1, b: 2, c: 3 }; | |
| const removeKey = "b"; | |
| const { [removeKey]: _remove, ...newObj } = baseObj; |
| const emailRegexp = | |
| /[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/i; | |
| const alphabeticRegexp = /^[a-zA-Z\s]*$/g; | |
| const specialsRegexp = /[`\+=\?!\]\[\$}{:\/&\\@#\|<>;]/g; | |
| const nonNumericRegexp = /\D/g; | |
| export const isEmail = (email?: string | number | undefined) => { | |
| return Boolean(`${email ?? ''}`.match(emailRegexp)); | |
| }; |
With this code snippet, you can use Ionicons in your React + TypeScript project with code completion and without any errors from React side.
ion-icons.d.ts file.<head> tags.<head>
| [ | |
| { | |
| "key": "ctrl+]", | |
| "command": "workbench.action.nextSideBarView" | |
| }, | |
| { | |
| "key": "ctrl+[", | |
| "command": "workbench.action.previousSideBarView" | |
| }, | |
| { |
| const SearchView = ({navigation}) => { | |
| const heroAnim = useRef(new Animated.Value(1)).current | |
| const [isSearchFocus, setSearchFocus] = useState(false) | |
| useEffect(() => { | |
| if(isSearchFocus) { | |
| Animated.timing(heroAnim, { | |
| toValue: 1, | |
| duration: 230, | |
| useNativeDriver: false, |
| { | |
| "Custom Color Snippet": { | |
| "prefix": "customcolor", | |
| "body": [ | |
| "Map<int, Color> $4 = {", | |
| "\t50:Color.fromRGBO($1, $2, $3, .1),", | |
| "\t100:Color.fromRGBO($1, $2, $3, .2),", | |
| "\t200:Color.fromRGBO($1, $2, $3, .3),", | |
| "\t300:Color.fromRGBO($1, $2, $3, .4),", | |
| "\t400:Color.fromRGBO($1, $2, $3, .5),", |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col col-md-6 offset-md-3"> | |
| <header> | |
| <div class="head float-none text-center"><h1>Simon Game</h1></div> | |
| <div class="settings float-left"> | |
| <a id="start-btn" class="btn btn-sm btn-info">Start</a> | |
| <a id="strict-toggle" class="btn btn-sm btn-dark">Strict</a> | |
| </div> | |
| <div class="level float-right"><span class="curr-level">0</span>/20</div> |