@fortawesome/free-solid-svg-icons#faCode JavaScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faCode.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: ColumnService.js From vue-bootstrap-editable-table with The Unlicense | 6 votes |
|
static icon(type) {
switch (type) {
case TYPES.DATE:
return faCalendarDay;
case TYPES.URL:
return faImage;
case TYPES.JSON:
return faCode;
case TYPES.DOUBLE:
return faCalculator;
case TYPES.PERCENT:
return faPercent;
case TYPES.TEXT:
return faAlignLeft;
}
}
Example #2
| Source File: Footer.js From foodies with MIT License | 6 votes |
|
function Footer() {
return (
<div className="bg-background-tertiary text-copy-primary flex flex-row sm:flex-col sm:text-center sm:justify-around justify-between bg-gray-800 h-32">
<div className="container flex flex-col justify-center ml-12 sm:ml-0">
<p className="text-gray-100 text-sm sm:text-xs mb-1">
Powered by MealDB
</p>
<p className="text-gray-500 text-lg sm:text-sm">
Proudly built with ⚛
</p>
</div>
<div className="container flex flex-col justify-center mr-12 sm:text-center text-right text-gray-500 text-lg">
<p className="text-sm sm:text-xs text-white mb-1">
<FontAwesomeIcon icon={faCode} size="1x" /> by{" "}
<a href="https://twitter.com/heytulsiprasad">
@heytulsiprasad
</a>
</p>
<p className="text-md sm:text-sm">
Made possible by
<span className="text-gray-400 mx-2">
<FontAwesomeIcon icon={faCoffee} size="1x" />
</span>
and
<span className="text-gray-400 ml-2">
<FontAwesomeIcon icon={faHeart} size="1x" />
</span>
</p>
</div>
</div>
);
}
Example #3
| Source File: logo.jsx From gsoc-organizations with GNU General Public License v3.0 | 6 votes |
|
Logo = ({ size, color }) => {
let logoStyle = getLogoStyle(size, color)
return (
<span style={logoStyle}>
<FontAwesomeIcon icon={faCode}></FontAwesomeIcon>
</span>
)
}
Example #4
| Source File: index.jsx From loopring-swap with GNU General Public License v3.0 | 5 votes |
|
TechnicalResources = () => {
return (
<>
<ListItemHeader mb={2}>
<FormattedMessage id="drawer.wallet.connect.list.header.technical.resources" />
</ListItemHeader>
<UndecoratedLink
href="https://docs.loopring.io/en/"
target="_blank"
rel="noreferrer noopener"
>
<ListItemBox>
<ListItemIcon icon={faFile} />{" "}
<FormattedMessage id="drawer.wallet.connect.list.item.exchange.api" />
</ListItemBox>
</UndecoratedLink>
<UndecoratedLink
href={`${getEtherscanLink(
CHAIN_ID
)}/address/${DEX_SMART_CONTRACT_ADDRESS}`}
target="_blank"
rel="noreferrer noopener"
>
<ListItemBox>
<ListItemIcon icon={faPencilRuler} />{" "}
<FormattedMessage id="drawer.wallet.connect.list.item.smart.contract" />
</ListItemBox>
</UndecoratedLink>
<UndecoratedLink
href="https://loopring.org"
target="_blank"
rel="noreferrer noopener"
>
<ListItemBox>
<ListItemIcon icon={faRulerCombined} />{" "}
<FormattedMessage id="drawer.wallet.connect.list.item.loopring.protocol" />
</ListItemBox>
</UndecoratedLink>
<UndecoratedLink
href="https://github.com/luzzif/loopring-swap"
target="_blank"
rel="noreferrer noopener"
>
<ListItemBox>
<ListItemIcon icon={faCode} />{" "}
<FormattedMessage id="drawer.wallet.connect.list.item.source.code" />
</ListItemBox>
</UndecoratedLink>
</>
);
}
Example #5
| Source File: index.js From Webiu with MIT License | 5 votes |
|
ProjectsList = ({title, showSearchBar, searchPlaceHolder, items=[], limit, suffle = false}) => {
const suffledItems = suffle ? items.sort(() => Math.random() - 0.5) : items
const [searchItem, setSearchItem] = useState("");
const [searchResults, setSearchResults] = useState(suffledItems);
const handleSearch = async (searchItem) => {
const results = suffledItems.filter(item =>
item.title.toLowerCase().includes(searchItem)
);
setSearchItem(searchItem);
setSearchResults(results);
}
return (
<div className="project-list-component">
{!title || (
<div className="header-component">
<Row>
<Col>
<h2 className="title"><FontAwesomeIcon className="icon" icon={faCode} /> {title}</h2>
</Col>
</Row>
</div>
)}
{showSearchBar ?
<div className="projects-search">
{showSearchBar ? <SearchBar input={searchItem} handleSearch={handleSearch} placeHolder={searchPlaceHolder} />: null}
</div>
: null}
<Container>
<Row>
{searchResults.map((item, i) => !limit || i < limit ? (
<ProjectListItem
key={i}
{...item}
/>
) : null)}
</Row>
<Row>
<Col className="view-all-btn-container">
{!limit || <a href='/projects' className="btn-projects">Many More <FontAwesomeIcon icon={faArrowRight}/></a>}
</Col>
</Row>
</Container>
</div>
)
}
Example #6
| Source File: index.js From Webiu with MIT License | 4 votes |
|
GithubRepo = ({ reponame, title, auth_token }) => {
const [loading, setLoading] = useState(true)
const [repo, setRepo] = useState(null)
useEffect(() => {
const repoFetchUrl = `https://api.github.com/repos/${reponame}?access_token=${auth_token}`
setLoading(true)
fetch(repoFetchUrl, {
method: 'GET',
headers: new Headers({
'Authorization': auth_token,
'Content-Type': 'application/json'
})})
.then((res) => res.json()).then((data) => {
setRepo(data)
setLoading(false)
})
.catch((err) => { throw err });
}, [reponame, auth_token])
return (
<div className="github-repo-component">
{title ? <div className="header-component">
<h2><FontAwesomeIcon className="icon-h2" icon={faGithub} /> <span className="h2-title">{title}</span></h2>
</div> : null}
{repo && !repo.message ?
<Container>
{loading && <p>Fetching the details</p>}
{repo ?
<GithubCard name={repo.name} description={repo.description.substring(0, 300)}
image={repo.organization.avatar_url}
username={repo.full_name} url={repo.html_url}
from={repo.created_at} />
: null}
<div style={{textAlign: "center"}}>
{loading && <p>Fetching the details</p>}
{repo ?
<Row>
<Col lg={3}>
<div className="repo-card-github">
<p className="repo-title"><FontAwesomeIcon icon={faAsterisk} /> Owner</p>
<p className="card-para">{repo.owner.login}</p>
</div>
</Col>
<Col lg={3}>
<div className="repo-card-github">
<p className="repo-title"><FontAwesomeIcon icon={faCode} /> Languages</p>
<p className="card-para">{repo.language}</p>
</div>
</Col>
<Col lg={3}>
<div className="repo-card-github">
<p className="repo-title"><FontAwesomeIcon icon={faCodeBranch} /> No. of Forks</p>
<p className="card-para">{repo.forks}</p>
</div>
</Col>
<Col lg={3}>
<div className="repo-card-github">
<p className="repo-title"><FontAwesomeIcon icon={faHistory} /> Last Updated</p>
<p className="card-para">{moment(repo.upadted_at).format("MMMM Do YYYY")}</p>
</div>
</Col>
<Col lg={3}>
<div className="repo-card-github">
<p className="repo-title"><FontAwesomeIcon icon={faExclamation} /> Open Issues</p>
<p className="card-para">{repo.open_issues_count} Issues Opened</p>
</div>
</Col>
<Col lg={3}>
<div className="repo-card-github">
<p className="repo-title"><FontAwesomeIcon icon={faUser} /> No. of Contributors</p>
<p className="card-para">{repo.subscribers_count}</p>
</div>
</Col>
<Col lg={3}>
<div className="repo-card-github">
<p className="repo-title"><FontAwesomeIcon icon={faGithubAlt} /> default Branch</p>
<p className="card-para">{repo.default_branch}</p>
</div>
</Col>
<Col lg={3}>
<div className="repo-card-github">
<p className="repo-title"><FontAwesomeIcon icon={faIdBadge} /> License</p>
<p className="card-para">{repo.license.name}</p>
</div>
</Col>
</Row>
: null}
</div>
</Container>
: <div style={{textAlign: "center"}}><h2>Repo Not Found, Please check the repo name or the Auth Token</h2></div>}
</div>
)
}
Example #7
| Source File: content.js From yezz.me with MIT License | 4 votes |
|
render() {
return (
<StaticQuery
query={graphql`
query projectsQuery {
allProjectsJson {
edges {
node {
project
link
description
language
}
}
}
allLanguagesJson {
edges {
node {
id
language
}
}
}
allArticlesJson {
edges {
node {
article
link
description
language
}
}
}
allCommunityJson {
edges {
node {
communityName
communityLink
Stack
Year
Description
}
}
}
allTalkJson {
edges {
node {
subject
link
Description
}
}
}
}
`}
render={data => (
<>
<section className="content" id="content">
<div className="container">
<div className="subsection">
<h2 className="mt-5">
<span className="dot"></span>Last{" "}
<span className="word">Articles</span>
</h2>
<div className="row">
{data.allArticlesJson.edges.map(({ node }, index) => (
<div className="col-lg-4" key={index}>
<div className="card mb-4">
<div className="card-body">
<div className="card-title">
<h3>{node.article}</h3>
<h4>
<FontAwesomeIcon
icon={faTag}
className="mr-2"
/>
{node.language}
</h4>
</div>
<div className="card-text">{node.description}</div>
</div>
<div className="card-footer">
<a
href={node.link}
target="_blank"
rel="noreferrer"
>
View
</a>
</div>
</div>
</div>
))}
</div>
</div>
{/* + Technologies subsection */}
<div className="subsection">
<h2 className="mt-5">
<span className="dot"></span>Language &{" "}
<span className="word">Technology</span>
</h2>
<div className="row">
{data.allLanguagesJson.edges.map(({ node }, index) => (
<div className="col-lg-4 col-md-6" key={index}>
<div className="card">
<div className="card-text">
<div className="card-item">
<FontAwesomeIcon
icon={faCode}
className="mr-2 item-icon"
/>{" "}
{node.language}
</div>
</div>
</div>
</div>
))}
</div>
</div>
{/* - Technologies subsection */}
<br />
{/* - Community subsection */}
<div className="subsection">
<h2>
<span className="dot"></span>Community{" "}
</h2>
{data.allCommunityJson.edges.map(({ node }, index) => (
<div className="card">
<div className="card-body" key={index}>
<div className="card-title">
<a
href={node.communityLink}
target="_blank"
rel="noreferrer"
>
<h3>{node.communityName}</h3>
</a>
<h4>
<FontAwesomeIcon
icon={faUserNinja}
className="mr-2"
/>{" "}
{node.Stack}
</h4>
<h4>
<FontAwesomeIcon
icon={faCalendar}
className="mr-2"
/>{" "}
{node.Year}
</h4>
</div>
<div className="card-text">
<span>⭐</span> {node.Description}
</div>
</div>
</div>
))}
</div>
{/* + Projects subsection */}
<div className="subsection">
<h2 className="mt-5">
<a
href="https://github.com/yezz123"
target="_blank"
rel="noreferrer"
>
<span className="dot"></span>OpenSource
</a>{" "}
</h2>
<div className="row">
{data.allProjectsJson.edges.map(({ node }, index) => (
<div className="col-lg-4" key={index}>
<div className="card mb-4">
<div className="card-body">
<div className="card-title">
<h3>{node.project}</h3>
<h4>
<FontAwesomeIcon
icon={faCode}
className="mr-2"
/>
{node.language}
</h4>
</div>
<div className="card-text">{node.description}</div>
</div>
<div className="card-footer">
<a
href={node.link}
target="_blank"
rel="noreferrer"
>
View
</a>
</div>
</div>
</div>
))}
</div>
</div>
{/* + Talk subsection */}
<div className="subsection">
<h2>
<span className="dot"></span>Talks{" "}
</h2>
{data.allTalkJson.edges.map(({ node }, index) => (
<div className="card">
<div className="card-body" key={index}>
<div className="card-title">
<a href={node.link} target="_blank" rel="noreferrer">
<h4>{node.subject}</h4>
</a>
</div>
<div className="card-text">
<span>⭐</span> {node.Description}
</div>
</div>
</div>
))}
</div>
</div>
</section>
</>
)}
/>
)
}
